<!DOCTYPE html><html lang="zh-Hans"><head><meta charset="utf-8"><title>Angular - 管理数据</title><meta name="Description" content="Angular is a platform for building mobile and desktop web applications.
    Join the community of millions of developers who build compelling user interfaces with Angular."><base href="/"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="search" type="application/opensearchdescription+xml" href="assets/opensearch.xml"><link rel="icon" type="image/x-icon" href="assets/images/favicons/favicon.ico"><link rel="icon" type="image/png" href="assets/images/favicons/favicon-32x32.png" sizes="32x32"><link rel="icon" type="image/png" href="assets/images/favicons/favicon-194x194.png" sizes="194x194"><link rel="icon" type="image/png" href="assets/images/favicons/favicon-96x96.png" sizes="96x96"><link rel="icon" type="image/png" href="assets/images/favicons/favicon-16x16.png" sizes="16x16"><link rel="apple-touch-icon" sizes="144x144" href="assets/images/favicons/favicon-144x144.png"><link rel="apple-touch-icon-precomposed" sizes="144x144" href="assets/images/favicons/favicon-144x144.png"><link href="assets/fonts/Material_Icons.css" rel="stylesheet"><link href="assets/fonts/Droid_Sans_Mono.css" rel="stylesheet"><link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"><link rel="manifest" href="pwa-manifest.json"><meta name="theme-color" content="#1976d2"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="translucent"><script async="" src="assets/js/analytics.js"></script><script>!function(e,a,n,t,s,c,g){e.GoogleAnalyticsObject=s,e.ga=e.ga||function(){(e.ga.q=e.ga.q||[]).push(arguments)},e.ga.l=1*new Date,c=a.createElement(n),g=a.getElementsByTagName(n)[0],c.async=1,c.src="assets/js/analytics.js",~e.name.indexOf("NG_DEFER_BOOTSTRAP")||g.parentNode.insertBefore(c,g)}(window,document,"script",0,"ga")</script><script>window.onerror=function(){ga("send","exception",{exDescription:function(e,r,n,a,c){var l;e=e.replace(/^Error: /,""),l=c?c.stack.replace(/^Error: /,"").replace(e+"\n","").replace(/^ +/gm,"").replace(/^at /gm,"").replace(/(?: \(|@)http.+\/([^/)]+)\)?(?:\n|$)/gm,"@$1\n").replace(/ *\(eval code(:\d+:\d+)\)(?:\n|$)/gm,"@???$1\n"):r+":"+(n=n||"?")+":"+(a=a||"?");return(e+"\n"+l).substr(0,150)}.apply(null,arguments),exFatal:!0})}</script><link rel="stylesheet" href="styles.4adbe52ad34df01b5273.css"><style>.cdk-high-contrast-active .mat-toolbar{outline:solid 1px}.mat-toolbar-row,.mat-toolbar-single-row{display:flex;box-sizing:border-box;padding:0 16px;width:100%;flex-direction:row;align-items:center;white-space:nowrap}.mat-toolbar-multiple-rows{display:flex;box-sizing:border-box;flex-direction:column;width:100%}.mat-toolbar-multiple-rows{min-height:64px}.mat-toolbar-row,.mat-toolbar-single-row{height:64px}@media(max-width:599px){.mat-toolbar-multiple-rows{min-height:56px}.mat-toolbar-row,.mat-toolbar-single-row{height:56px}}</style><style>.mat-icon{background-repeat:no-repeat;display:inline-block;fill:currentColor;height:24px;width:24px}.mat-icon.mat-icon-inline{font-size:inherit;height:inherit;line-height:inherit;width:inherit}[dir=rtl] .mat-icon-rtl-mirror{transform:scale(-1,1)}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon{display:block}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon-button .mat-icon,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button .mat-icon{margin:auto}</style><style>.mat-button .mat-button-focus-overlay,.mat-icon-button .mat-button-focus-overlay{opacity:0}.mat-button:hover .mat-button-focus-overlay,.mat-stroked-button:hover .mat-button-focus-overlay{opacity:.04}@media(hover:none){.mat-button:hover .mat-button-focus-overlay,.mat-stroked-button:hover .mat-button-focus-overlay{opacity:0}}.mat-button,.mat-flat-button,.mat-icon-button,.mat-stroked-button{box-sizing:border-box;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible}.mat-button::-moz-focus-inner,.mat-flat-button::-moz-focus-inner,.mat-icon-button::-moz-focus-inner,.mat-stroked-button::-moz-focus-inner{border:0}.mat-button[disabled],.mat-flat-button[disabled],.mat-icon-button[disabled],.mat-stroked-button[disabled]{cursor:default}.mat-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-button.cdk-program-focused .mat-button-focus-overlay,.mat-flat-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-flat-button.cdk-program-focused .mat-button-focus-overlay,.mat-icon-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-icon-button.cdk-program-focused .mat-button-focus-overlay,.mat-stroked-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-stroked-button.cdk-program-focused .mat-button-focus-overlay{opacity:.12}.mat-button::-moz-focus-inner,.mat-flat-button::-moz-focus-inner,.mat-icon-button::-moz-focus-inner,.mat-stroked-button::-moz-focus-inner{border:0}.mat-raised-button{box-sizing:border-box;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible;transform:translate3d(0,0,0);transition:background .4s cubic-bezier(.25,.8,.25,1),box-shadow 280ms cubic-bezier(.4,0,.2,1)}.mat-raised-button::-moz-focus-inner{border:0}.mat-raised-button[disabled]{cursor:default}.mat-raised-button.cdk-keyboard-focused .mat-button-focus-overlay,.mat-raised-button.cdk-program-focused .mat-button-focus-overlay{opacity:.12}.mat-raised-button::-moz-focus-inner{border:0}._mat-animation-noopable.mat-raised-button{transition:none;animation:none}.mat-stroked-button{border:1px solid currentColor;padding:0 15px;line-height:34px}.mat-stroked-button .mat-button-focus-overlay,.mat-stroked-button .mat-button-ripple.mat-ripple{top:-1px;left:-1px;right:-1px;bottom:-1px}.mat-fab{box-sizing:border-box;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible;transform:translate3d(0,0,0);transition:background .4s cubic-bezier(.25,.8,.25,1),box-shadow 280ms cubic-bezier(.4,0,.2,1);min-width:0;border-radius:50%;width:56px;height:56px;padding:0;flex-shrink:0}.mat-fab::-moz-focus-inner{border:0}.mat-fab[disabled]{cursor:default}.mat-fab.cdk-keyboard-focused .mat-button-focus-overlay,.mat-fab.cdk-program-focused .mat-button-focus-overlay{opacity:.12}.mat-fab::-moz-focus-inner{border:0}._mat-animation-noopable.mat-fab{transition:none;animation:none}.mat-fab .mat-button-wrapper{padding:16px 0;display:inline-block;line-height:24px}.mat-mini-fab{box-sizing:border-box;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;outline:0;border:none;-webkit-tap-highlight-color:transparent;display:inline-block;white-space:nowrap;text-decoration:none;vertical-align:baseline;text-align:center;margin:0;min-width:64px;line-height:36px;padding:0 16px;border-radius:4px;overflow:visible;transform:translate3d(0,0,0);transition:background .4s cubic-bezier(.25,.8,.25,1),box-shadow 280ms cubic-bezier(.4,0,.2,1);min-width:0;border-radius:50%;width:40px;height:40px;padding:0;flex-shrink:0}.mat-mini-fab::-moz-focus-inner{border:0}.mat-mini-fab[disabled]{cursor:default}.mat-mini-fab.cdk-keyboard-focused .mat-button-focus-overlay,.mat-mini-fab.cdk-program-focused .mat-button-focus-overlay{opacity:.12}.mat-mini-fab::-moz-focus-inner{border:0}._mat-animation-noopable.mat-mini-fab{transition:none;animation:none}.mat-mini-fab .mat-button-wrapper{padding:8px 0;display:inline-block;line-height:24px}.mat-icon-button{padding:0;min-width:0;width:40px;height:40px;flex-shrink:0;line-height:40px;border-radius:50%}.mat-icon-button .mat-icon,.mat-icon-button i{line-height:24px}.mat-button-focus-overlay,.mat-button-ripple.mat-ripple{top:0;left:0;right:0;bottom:0;position:absolute;pointer-events:none;border-radius:inherit}.mat-button-ripple.mat-ripple:not(:empty){transform:translateZ(0)}.mat-button-focus-overlay{opacity:0;transition:opacity .2s cubic-bezier(.35,0,.25,1),background-color .2s cubic-bezier(.35,0,.25,1)}._mat-animation-noopable .mat-button-focus-overlay{transition:none}.cdk-high-contrast-active .mat-button-focus-overlay{background-color:#fff}.cdk-high-contrast-black-on-white .mat-button-focus-overlay{background-color:#000}.mat-button-ripple-round{border-radius:50%;z-index:1}.mat-button .mat-button-wrapper>*,.mat-fab .mat-button-wrapper>*,.mat-flat-button .mat-button-wrapper>*,.mat-icon-button .mat-button-wrapper>*,.mat-mini-fab .mat-button-wrapper>*,.mat-raised-button .mat-button-wrapper>*,.mat-stroked-button .mat-button-wrapper>*{vertical-align:middle}.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-prefix .mat-icon-button,.mat-form-field:not(.mat-form-field-appearance-legacy) .mat-form-field-suffix .mat-icon-button{display:block;font-size:inherit;width:2.5em;height:2.5em}.cdk-high-contrast-active .mat-button,.cdk-high-contrast-active .mat-fab,.cdk-high-contrast-active .mat-flat-button,.cdk-high-contrast-active .mat-icon-button,.cdk-high-contrast-active .mat-mini-fab,.cdk-high-contrast-active .mat-raised-button{outline:solid 1px}</style><style>.mat-drawer-container{position:relative;z-index:1;box-sizing:border-box;-webkit-overflow-scrolling:touch;display:block;overflow:hidden}.mat-drawer-container[fullscreen]{top:0;left:0;right:0;bottom:0;position:absolute}.mat-drawer-container[fullscreen].mat-drawer-container-has-open{overflow:hidden}.mat-drawer-container.mat-drawer-container-explicit-backdrop .mat-drawer-side{z-index:3}.mat-drawer-container.ng-animate-disabled .mat-drawer-backdrop,.mat-drawer-container.ng-animate-disabled .mat-drawer-content,.ng-animate-disabled .mat-drawer-container .mat-drawer-backdrop,.ng-animate-disabled .mat-drawer-container .mat-drawer-content{transition:none}.mat-drawer-backdrop{top:0;left:0;right:0;bottom:0;position:absolute;display:block;z-index:3;visibility:hidden}.mat-drawer-backdrop.mat-drawer-shown{visibility:visible}.mat-drawer-transition .mat-drawer-backdrop{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:background-color,visibility}.cdk-high-contrast-active .mat-drawer-backdrop{opacity:.5}.mat-drawer-content{position:relative;z-index:1;display:block;height:100%;overflow:auto}.mat-drawer-transition .mat-drawer-content{transition-duration:.4s;transition-timing-function:cubic-bezier(.25,.8,.25,1);transition-property:transform,margin-left,margin-right}.mat-drawer{position:relative;z-index:4;display:block;position:absolute;top:0;bottom:0;z-index:3;outline:0;box-sizing:border-box;overflow-y:auto;transform:translate3d(-100%,0,0)}.cdk-high-contrast-active .mat-drawer,.cdk-high-contrast-active [dir=rtl] .mat-drawer.mat-drawer-end{border-right:solid 1px currentColor}.cdk-high-contrast-active .mat-drawer.mat-drawer-end,.cdk-high-contrast-active [dir=rtl] .mat-drawer{border-left:solid 1px currentColor;border-right:none}.mat-drawer.mat-drawer-side{z-index:2}.mat-drawer.mat-drawer-end{right:0;transform:translate3d(100%,0,0)}[dir=rtl] .mat-drawer{transform:translate3d(100%,0,0)}[dir=rtl] .mat-drawer.mat-drawer-end{left:0;right:auto;transform:translate3d(-100%,0,0)}.mat-drawer-inner-container{width:100%;height:100%;overflow:auto;-webkit-overflow-scrolling:touch}.mat-sidenav-fixed{position:fixed}</style><style>.nav-link.highlight[_ngcontent-ng-docs-c30]{color:#ff0}</style><script charset="utf-8" src="toc-toc-module-es2015.f8531f591ee147aebcc6.js"></script><script charset="utf-8" src="default~code-code-example-module~code-code-tabs-module-es2015.9efcc76d2979a2e605e0.js"></script><script charset="utf-8" src="code-code-example-module-es2015.fa05e6f700453813d256.js"></script><style>.mat-progress-bar{display:block;height:4px;overflow:hidden;position:relative;transition:opacity 250ms linear;width:100%}._mat-animation-noopable.mat-progress-bar{transition:none;animation:none}.mat-progress-bar .mat-progress-bar-element,.mat-progress-bar .mat-progress-bar-fill::after{height:100%;position:absolute;width:100%}.mat-progress-bar .mat-progress-bar-background{width:calc(100% + 10px)}.cdk-high-contrast-active .mat-progress-bar .mat-progress-bar-background{display:none}.mat-progress-bar .mat-progress-bar-buffer{transform-origin:top left;transition:transform 250ms ease}.cdk-high-contrast-active .mat-progress-bar .mat-progress-bar-buffer{border-top:solid 5px;opacity:.5}.mat-progress-bar .mat-progress-bar-secondary{display:none}.mat-progress-bar .mat-progress-bar-fill{animation:none;transform-origin:top left;transition:transform 250ms ease}.cdk-high-contrast-active .mat-progress-bar .mat-progress-bar-fill{border-top:solid 4px}.mat-progress-bar .mat-progress-bar-fill::after{animation:none;content:"";display:inline-block;left:0}.mat-progress-bar[dir=rtl],[dir=rtl] .mat-progress-bar{transform:rotateY(180deg)}.mat-progress-bar[mode=query]{transform:rotateZ(180deg)}.mat-progress-bar[mode=query][dir=rtl],[dir=rtl] .mat-progress-bar[mode=query]{transform:rotateZ(180deg) rotateY(180deg)}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-fill,.mat-progress-bar[mode=query] .mat-progress-bar-fill{transition:none}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-primary,.mat-progress-bar[mode=query] .mat-progress-bar-primary{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-primary-indeterminate-translate 2s infinite linear;left:-145.166611%}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-primary.mat-progress-bar-fill::after,.mat-progress-bar[mode=query] .mat-progress-bar-primary.mat-progress-bar-fill::after{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-primary-indeterminate-scale 2s infinite linear}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-secondary,.mat-progress-bar[mode=query] .mat-progress-bar-secondary{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-secondary-indeterminate-translate 2s infinite linear;left:-54.888891%;display:block}.mat-progress-bar[mode=indeterminate] .mat-progress-bar-secondary.mat-progress-bar-fill::after,.mat-progress-bar[mode=query] .mat-progress-bar-secondary.mat-progress-bar-fill::after{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-secondary-indeterminate-scale 2s infinite linear}.mat-progress-bar[mode=buffer] .mat-progress-bar-background{-webkit-backface-visibility:hidden;backface-visibility:hidden;animation:mat-progress-bar-background-scroll 250ms infinite linear;display:block}.mat-progress-bar._mat-animation-noopable .mat-progress-bar-background,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-buffer,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-fill,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-fill::after,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-primary,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-primary.mat-progress-bar-fill::after,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-secondary,.mat-progress-bar._mat-animation-noopable .mat-progress-bar-secondary.mat-progress-bar-fill::after{animation:none;transition:none}@keyframes mat-progress-bar-primary-indeterminate-translate{0%{transform:translateX(0)}20%{animation-timing-function:cubic-bezier(.5,0,.701732,.495819);transform:translateX(0)}59.15%{animation-timing-function:cubic-bezier(.302435,.381352,.55,.956352);transform:translateX(83.67142%)}100%{transform:translateX(200.611057%)}}@keyframes mat-progress-bar-primary-indeterminate-scale{0%{transform:scaleX(.08)}36.65%{animation-timing-function:cubic-bezier(.334731,.12482,.785844,1);transform:scaleX(.08)}69.15%{animation-timing-function:cubic-bezier(.06,.11,.6,1);transform:scaleX(.661479)}100%{transform:scaleX(.08)}}@keyframes mat-progress-bar-secondary-indeterminate-translate{0%{animation-timing-function:cubic-bezier(.15,0,.515058,.409685);transform:translateX(0)}25%{animation-timing-function:cubic-bezier(.31033,.284058,.8,.733712);transform:translateX(37.651913%)}48.35%{animation-timing-function:cubic-bezier(.4,.627035,.6,.902026);transform:translateX(84.386165%)}100%{transform:translateX(160.277782%)}}@keyframes mat-progress-bar-secondary-indeterminate-scale{0%{animation-timing-function:cubic-bezier(.15,0,.515058,.409685);transform:scaleX(.08)}19.15%{animation-timing-function:cubic-bezier(.31033,.284058,.8,.733712);transform:scaleX(.457104)}44.15%{animation-timing-function:cubic-bezier(.4,.627035,.6,.902026);transform:scaleX(.72796)}100%{transform:scaleX(.08)}}@keyframes mat-progress-bar-background-scroll{to{transform:translateX(-8px)}}</style><script charset="utf-8" src="assets-js-prettify-js-es2015.ba856648f2dd2d930a9b.js"></script></head><body><aio-shell ng-version="9.0.0-rc.11" class="aio-notification-hide folder-start mode-stable page-start-data sidenav-open view-SideNav"><div id="top-of-page"></div><mat-toolbar color="primary" class="mat-toolbar app-toolbar no-print mat-primary mat-toolbar-multiple-rows"><mat-toolbar-row class="mat-toolbar-row notification-container"><aio-notification notificationid="survey-february-2019" expirationdate="2019-03-01" class="ng-tns-c22-0 ng-trigger ng-trigger-hideAnimation" style="height:0"><span class="content ng-tns-c22-0"><a href="http://bit.ly/angular-survey-2019" target="_blank" class="ng-tns-c22-0"><mat-icon role="img" svgicon="insert_comment" aria-label="Announcement" class="mat-icon notranslate icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M20 2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4V4c0-1.1-.9-2-2-2zm-2 12H6v-2h12v2zm0-3H6V9h12v2zm0-3H6V6h12v2z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></mat-icon><span class="message"><b>填写这份《一分钟调查》</b>，帮我们（开发组）做得更好！</span><span class="action-button">去填写</span></a></span><button mat-icon-button="" aria-label="Close" class="close-button ng-tns-c22-0 mat-icon-button mat-button-base"><span class="mat-button-wrapper"><mat-icon role="img" svgicon="close" aria-label="Dismiss notification" class="mat-icon notranslate mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></mat-icon></span><div matripple="" class="mat-ripple mat-button-ripple mat-button-ripple-round"></div><div class="mat-button-focus-overlay"></div></button></aio-notification></mat-toolbar-row><mat-toolbar-row class="mat-toolbar-row"><button mat-button="" title="Docs menu" class="hamburger mat-button mat-button-base"><span class="mat-button-wrapper"><mat-icon role="img" svgicon="menu" class="mat-icon notranslate mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path></svg></mat-icon></span><div matripple="" class="mat-ripple mat-button-ripple"></div><div class="mat-button-focus-overlay"></div></button><a href="/" class="nav-link home"><img src="assets/images/logos/angular/logo-nav@2x.png" width="150" height="40" title="Home" alt="Home" class="ng-star-inserted"></a><aio-top-menu _nghost-ng-docs-c30="" class="ng-star-inserted"><ul _ngcontent-ng-docs-c30="" role="navigation"><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="features" title="特性"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">特性</span></a></li><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="docs" title="文档"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">文档</span></a></li><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="resources" title="资源"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">资源</span></a></li><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="events" title="会议"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">会议</span></a></li><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="https://blog.angular.io/" title="博客"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">博客</span></a></li><li _ngcontent-ng-docs-c30="" class="ng-star-inserted"><a _ngcontent-ng-docs-c30="" class="nav-link" href="translations/cn/home" title="关于中文版"><span _ngcontent-ng-docs-c30="" class="nav-link-inner">关于中文版</span></a></li></ul></aio-top-menu><aio-search-box class="search-container"><input type="search" aria-label="search" placeholder="搜索"></aio-search-box><div class="toolbar-external-icons-container"><a href="https://twitter.com/angular" title="Twitter" aria-label="Angular on twitter"><mat-icon role="img" svgicon="logos:twitter" class="mat-icon notranslate mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 50 59" xmlns="http://www.w3.org/2000/svg"><path d="M50,9.3c-1.8,0.8-3.8,1.4-5.9,1.6c2.1-1.3,3.7-3.3,4.5-5.7c-2,1.2-4.2,2-6.5,2.5c-1.9-2-4.5-3.2-7.5-3.2c-5.7,0-10.3,4.6-10.3,10.3c0,0.8,0.1,1.6,0.3,2.3C16.1,16.7,8.5,12.6,3.5,6.4c-0.9,1.5-1.4,3.3-1.4,5.2c0,3.6,1.8,6.7,4.6,8.5C5,20,3.4,19.6,2,18.8c0,0,0,0.1,0,0.1c0,5,3.5,9.1,8.2,10.1c-0.9,0.2-1.8,0.4-2.7,0.4c-0.7,0-1.3-0.1-1.9-0.2c1.3,4.1,5.1,7,9.6,7.1c-3.5,2.8-7.9,4.4-12.7,4.4c-0.8,0-1.6,0-2.4-0.1c4.5,2.9,9.9,4.6,15.7,4.6c18.9,0,29.2-15.6,29.2-29.2c0-0.4,0-0.9,0-1.3C46.9,13.2,48.6,11.4,50,9.3z"></path></svg></mat-icon></a><a href="https://github.com/angular/angular" title="GitHub" aria-label="Angular on github"><mat-icon role="img" svgicon="logos:github" class="mat-icon notranslate mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 51.8 50.4" xmlns="http://www.w3.org/2000/svg"><path d="M25.9,0.2C11.8,0.2,0.3,11.7,0.3,25.8c0,11.3,7.3,20.9,17.5,24.3c1.3,0.2,1.7-0.6,1.7-1.2c0-0.6,0-2.6,0-4.8c-7.1,1.5-8.6-3-8.6-3c-1.2-3-2.8-3.7-2.8-3.7c-2.3-1.6,0.2-1.6,0.2-1.6c2.6,0.2,3.9,2.6,3.9,2.6c2.3,3.9,6,2.8,7.5,2.1c0.2-1.7,0.9-2.8,1.6-3.4c-5.7-0.6-11.7-2.8-11.7-12.7c0-2.8,1-5.1,2.6-6.9c-0.3-0.7-1.1-3.3,0.3-6.8c0,0,2.1-0.7,7,2.6c2-0.6,4.2-0.9,6.4-0.9c2.2,0,4.4,0.3,6.4,0.9c4.9-3.3,7-2.6,7-2.6c1.4,3.5,0.5,6.1,0.3,6.8c1.6,1.8,2.6,4.1,2.6,6.9c0,9.8-6,12-11.7,12.6c0.9,0.8,1.7,2.4,1.7,4.7c0,3.4,0,6.2,0,7c0,0.7,0.5,1.5,1.8,1.2c10.2-3.4,17.5-13,17.5-24.3C51.5,11.7,40.1,0.2,25.9,0.2z"></path></svg></mat-icon></a></div></mat-toolbar-row></mat-toolbar><mat-sidenav-container role="main" class="mat-drawer-container mat-sidenav-container sidenav-container mat-drawer-transition has-floating-toc"><div class="mat-drawer-backdrop ng-star-inserted"></div><div class="cdk-visually-hidden cdk-focus-trap-anchor" aria-hidden="true"></div><mat-sidenav tabindex="-1" class="mat-drawer mat-sidenav sidenav ng-tns-c18-1 ng-trigger ng-trigger-transform mat-drawer-side ng-star-inserted mat-drawer-opened" style="transform:none;visibility:visible"><div class="mat-drawer-inner-container ng-tns-c18-1"><aio-nav-menu class="ng-tns-c18-1"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="docs" title="Angular 文档简介" target="_self"><span>简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 expanded selected ng-star-inserted" title="通过构建第一个 Angular 应用来学习基础知识" aria-pressed="true"><span>快速上手</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 expanded selected"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="start" title="介绍 Angular 的组件模型、模板语法和组件通讯" target="_self"><span>你的第一个应用</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="start/routing" title="介绍如何使用浏览器的 URL 在组件之间进行路由" target="_self"><span>路由</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 expanded selected ng-star-inserted" style="position:relative" href="start/data" title="介绍服务以及如何访问外部数据" target="_self"><span>管理数据</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="start/forms" title="学习如何使用表单从用户那里获取并管理数据" target="_self"><span>表单</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="start/deployment" title="通过你的应用放到 Firebase 或自己的服务器上来把它分享给外界" target="_self"><span>部署</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="guide/setup-local" title="使用 Angular CLI 搭建本地开发环境简介" target="_self"><span>搭建环境</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="Angular 的基本原理" aria-pressed="false"><span>基本原理</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="介绍 Angular 应用中的一些基本概念。" aria-pressed="false"><span>Angular 的基本概念</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture" title="Angular 应用中的基本构造块。" target="_self"><span>基本概念简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture-modules" title="关于 Angular 模块（NgModules）。" target="_self"><span>模块简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture-components" title="关于组件、模板和视图。" target="_self"><span>组件简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture-services" title="关于服务与依赖注入。" target="_self"><span>服务与 DI 简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/architecture-next-steps" title="超越基础阶段。" target="_self"><span>后续步骤</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="英雄指南是这里大量 Angular 范例的基础" aria-pressed="false"><span>英雄指南</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial" title="《英雄指南》教程简介" target="_self"><span>简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt0" title="创建应用的外壳" target="_self"><span>应用的“外壳”</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt1" title="第一部分：构建一个简单的英雄编辑器" target="_self"><span>1. 英雄编辑器</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt2" title="第二部分：构建一个主从结构的页面，用于展现英雄列表。" target="_self"><span>2. 显示英雄列表</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt3" title="第三部分：把主从结构的视图重构成几个独立的组件。" target="_self"><span>3. 创建特性组件</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt4" title="第四部分：创建一个可复用的服务来管理英雄数据。" target="_self"><span>4. 添加服务</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt5" title="第五部分：添加 Angular 路由器，并且学习在视图之间导航。" target="_self"><span>5. 添加应用内导航</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="tutorial/toh-pt6" title="第六部分：通过 HTTP 来获取并保存英雄数据。" target="_self"><span>6. 从服务器获取数据</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="通过数据绑定构建动态视图" aria-pressed="false"><span>组件与模板</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/displaying-data" title="属性绑定可以帮助应用把数据显示在界面上" target="_self"><span>显示数据</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/template-syntax" title="学习如何写模板，以便借助数据绑定机制显示数据并响应事件。" target="_self"><span>模板语法</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/user-input" title="用户输入会触发 DOM 事件。Angular 会通过事件绑定来监听那些事件，并把修改后的值传回应用的组件和模型中。" target="_self"><span>用户输入</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/lifecycle-hooks" title="Angular 调用指令和组件的生命周期钩子函数，包括它的创建、变更和销毁时。" target="_self"><span>生命周期钩子</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/component-interaction" title="在不同的指令和组件之间共享信息" target="_self"><span>组件交互</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/component-styles" title="添加专属于某个组件的样式" target="_self"><span>组件样式</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dynamic-component-loader" title="动态加载组件" target="_self"><span>动态组件</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/elements" title="把组件转换成自定义元素" target="_self"><span>Angular 元素</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/attribute-directives" title="属性型指令把行为添加到现有元素上。" target="_self"><span>属性型指令</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/structural-directives" title="结构型指令可以操纵页面的布局" target="_self"><span>结构型指令</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/pipes" title="管道可以在模板中转换显示的内容。" target="_self"><span>管道</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="Angular 的表单" aria-pressed="false"><span>表单</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/forms-overview" title="表单可以创建集中、高效、引人注目的输入体验。Angular 表单可以协调一组数据绑定控件，跟踪变更，验证输入，并表达错误信息。" target="_self"><span>简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/reactive-forms" title="使用 FormBuilder、表单组和表单数组创建响应式表单。" target="_self"><span>响应式表单</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/forms" title="使用指令和 Angular 模板语法创建模板驱动表单。" target="_self"><span>模板驱动表单</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/form-validation" title="验证用户的表单输入" target="_self"><span>表单验证</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dynamic-form" title="使用 FormGroup 渲染动态表单。" target="_self"><span>动态表单</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="Observable 与 RxJS" aria-pressed="false"><span>Observable 与 RxJS</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/observables" title="" target="_self"><span>可观察对象(Observable)</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/rx-library" title="" target="_self"><span>RxJS 库</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/observables-in-angular" title="" target="_self"><span>Angular 中的可观察对象</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/practical-observable-usage" title="" target="_self"><span>用法实战</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/comparing-observables" title="" target="_self"><span>与其它技术的比较</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="Angular 中的模块" aria-pressed="false"><span>NgModules</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/ngmodules" title="使用 NgModule 让你的应用更高效" target="_self"><span>NgModule 简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/ngmodule-vs-jsmodule" title="JavaScript 模块和 NgModule 之间的差异" target="_self"><span>JS 模块 vs NgModule</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/bootstrapping" title="告诉 Angular 如何在根 &quot;AppModule&quot; 中构造和引导应用。" target="_self"><span>应用的根模块</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/frequent-ngmodules" title="介绍最常用的 NgModule" target="_self"><span>常用模块</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/module-types" title="介绍特性模块的几种类型" target="_self"><span>特性模块的分类</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/entry-components" title="关于 Angular 中入口组件的一切" target="_self"><span>入口组件</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/feature-modules" title="创建特性模块，以组织你的代码" target="_self"><span>特性模块</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/providers" title="服务提供商与 NgModule" target="_self"><span>服务提供商</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/singleton-services" title="创建单例服务" target="_self"><span>单例服务</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/lazy-loading-ngmodules" title="惰性加载模块，以提高应用的性能" target="_self"><span>惰性加载的特性模块</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/sharing-ngmodules" title="共享 NgModule 让你的应用现代化。" target="_self"><span>共享 NgModule</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/ngmodule-api" title="理解 NgModule 的那些细节。" target="_self"><span>NgModule API</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/ngmodule-faq" title="回答关于 NgModules 的常见问题。" target="_self"><span>NgModule 常见问题</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="依赖注入：创建并注入各种服务。" aria-pressed="false"><span>依赖注入</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dependency-injection" title="Angular 的依赖注入系统能够为 Angular 创建的类创建并交付它们所依赖的服务。" target="_self"><span>Angular 依赖注入</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/hierarchical-dependency-injection" title="与组件树平行的注入器树，并支持嵌套的依赖。" target="_self"><span>多级注入器</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dependency-injection-providers" title="各种提供商类型的更多知识。" target="_self"><span>DI 提供商</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dependency-injection-in-action" title="依赖注入的使用技巧" target="_self"><span>DI 实战</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/dependency-injection-navtree" title="使用注入器树来查找父组件。" target="_self"><span>浏览组件树</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/http" title="通过 HTTP 协议与远程服务器对话。" target="_self"><span>HttpClient</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/router" title="揭示如何通过 Angular 路由进行基本的屏幕导航。" target="_self"><span>路由与导航</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="Angular 动画系统指南" aria-pressed="false"><span>动画</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/animations" title="Angular 动画的基础技术。" target="_self"><span>简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/transition-and-triggers" title="转场与触发器的高级技术。" target="_self"><span>转场与触发器</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/complex-animation-sequences" title="复杂的 Angular 动画序列。" target="_self"><span>复杂序列</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/reusable-animations" title="创建可复用的动画。" target="_self"><span>可复用动画</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/route-animations" title="为路由提供转场动画。" target="_self"><span>路由转场动画</span></a></div></aio-nav-item></div></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="把 Angular 用到你的实际工作中的一些技巧" aria-pressed="false"><span>其它技术</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/security" title="Angular 应用开发中的安全技术。" target="_self"><span>安全</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/i18n" title="把应用模板中的文本翻译成多种语言。" target="_self"><span>国际化（i18n）</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/accessibility" title="设计能被所有用户访问的应用" target="_self"><span>无障碍（a11y）</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="Angular Service Worker: 控制应用资源的缓存。" aria-pressed="false"><span>Service Worker 与 PWA</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-intro" title="Angular 对 Service Worker 的实现提升了慢速或不稳定的网络连接下的用户体验。" target="_self"><span>简介</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-getting-started" title="在 CLI 项目中启用 Service Worker，并在浏览器中查看效果。" target="_self"><span>快速上手</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/app-shell" title="在 CLI 项目中启用应用外壳。" target="_self"><span>应用外壳</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-communications" title="那些能让你和 Angular 的 Service Worker 通讯的服务类。" target="_self"><span>与 Service Worker 通讯</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-devops" title="使用 Service Worker 运行应用、管理应用更新、调试以及杀掉正在运行的应用。" target="_self"><span>生产环境下的 Service Worker</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/service-worker-config" title="配置 Service Worker 的缓存行为。" target="_self"><span>Service Worker 配置</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/universal" title="使用 Angular Universal 在服务端渲染 HTML。" target="_self"><span>服务端渲染</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="把 AngularJS 应用增量式的升级到 Angular。" aria-pressed="false"><span>从 AngularJS 升级</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/upgrade" title="把 AngularJS 应用增量式的升级到 Angular。" target="_self"><span>升级步骤</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/upgrade-performance" title="用更灵活的方式把 AngularJS 升级到 Angular。" target="_self"><span>更关注性能的升级方式</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/ajs-quick-reference" title="学习如何把 AngularJS 的概念映射到 Angular 中。" target="_self"><span>AngularJS 与 Angular 的概念对照</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="使用共享库扩展 Angular" aria-pressed="false"><span>开发 Angular 库</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/libraries" title="理解何时以及如何使用和创建库。" target="_self"><span>库概览</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/using-libraries" title="把已发布的库集成进你的应用中。" target="_self"><span>使用已发布的库</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/creating-libraries" title="通过创建、发布和使用你自己的库来扩展 Angular。" target="_self"><span>创建库</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="理解原理图" aria-pressed="false"><span>原理图（Schematic）</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/schematics" title="理解 Angular 如何使用原理图。" target="_self"><span>原理图概览</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/schematics-authoring" title="理解原理图的结构。" target="_self"><span>制作原理图</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/schematics-for-libraries" title="使用原理图来把你的库集成进 Angular CLI 中。" target="_self"><span>库的原理图</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/cli-builder" title="使用构建器定制 Angular CLI。" target="_self"><span>CLI 构建器</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/web-worker" title="在 Angular CLI 中使用 Web Worker。" target="_self"><span>Web Worker</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="关于构建、测试和部署的信息" aria-pressed="false"><span>开发工作流</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="理解 AOT 预先编译器。" aria-pressed="false"><span>AOT 预先编译器</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/aot-compiler" title="学习为何以及如何使用预先编译器。" target="_self"><span>预先编译</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/angular-compiler-options" title="配置 AOT 编译。" target="_self"><span>Angular 编译器选项</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/aot-metadata-errors" title="解决 AOT 编译错误。" target="_self"><span>AOT 元数据错误</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/template-typecheck" title="Angular 中的模板类型检查。" target="_self"><span>模板类型检查</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/build" title="构建应用及为应用启动开发服务器。" target="_self"><span>构建与运行</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/bazel" title="如何配置你的环境，以利用 Bazel 进行构建和测试。" target="_self"><span>使用 Bazel 进行构建</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/testing" title="测试 Angular 应用的技巧与实践。" target="_self"><span>测试</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/deployment" title="了解如何部署 Angular 应用。" target="_self"><span>发布</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-2 collapsed ng-star-inserted" title="与开发环境和工具集成起来" aria-pressed="false"><span>开发工具集成</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-2 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-3 collapsed ng-star-inserted" style="position:relative" href="guide/language-service" title="使用 Angular 语言服务加速开发。" target="_self"><span>语言服务</span></a></div></aio-nav-item></div></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="工作空间与项目的结构，及其配置文件。" aria-pressed="false"><span>配置</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/file-structure" title="Angular 工作区在文件系统中是怎样的。" target="_self"><span>项目文件结构</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/workspace-config" title="&quot;angular.json&quot; 包含供 CLI 命令使用的工作区和项目默认配置。" target="_self"><span>工作区配置</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/npm-packages" title="开发期间和运行期间所需的 npm 包的说明。" target="_self"><span>npm 包</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/typescript-configuration" title="给 Angular 开发者的 TypeScript 配置。" target="_self"><span>TypeScript 配置</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/browser-support" title="浏览器支持与腻子脚本指南。" target="_self"><span>浏览器支持</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="Angular 的版本发布实践、更新与升级。" aria-pressed="false"><span>发布信息</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/updating" title="如何把 Angular 应用和库升级到最新版本。" target="_self"><span>保持最新</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/releases" title="Angular 的版本、发布、支持、弃用策略及实践。" target="_self"><span>发布实践</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/updating-to-version-9" title="支持把你的应用从 8 升级到 9。" target="_self"><span>升级到第 9 版</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/deprecations" title="弃用的 Angular API 和特性汇总。" target="_self"><span>弃用清单</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/ivy" title="关于 Angular Ivy 的编译与渲染管道。" target="_self"><span>Angular Ivy</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="Angular 语法、编码、术语汇总。" aria-pressed="false"><span>快捷手册</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/cheatsheet" title="关于 Angular 常用编码技术的快速指南。" target="_self"><span>速查表</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/styleguide" title="写出 Angular 风格的程序" target="_self"><span>风格指南</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="guide/glossary" title="Angular 中最重要的词汇的简要定义。" target="_self"><span>词汇表</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><button type="button" class="vertical-menu-item heading level-1 collapsed ng-star-inserted" title="Angular CLI 命令参考手册。" aria-pressed="false"><span>CLI 命令</span><mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><div class="heading-children level-1 collapsed"><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli" title="CLI 工具介绍、命令、语法" target="_self"><span>概览</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/usage-analytics-gathering" title="管理员如何从用户那里收集使用情况分析。" target="_self"><span>使用情况分析</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/add" title="ng add." target="_self"><span>ng add</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/analytics" title="ng analytics." target="_self"><span>ng analytics</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/build" title="ng build." target="_self"><span>ng build</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/config" title="ng config." target="_self"><span>ng config</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/deploy" title="ng deploy." target="_self"><span>ng deploy</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/doc" title="ng doc." target="_self"><span>ng doc</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/e2e" title="ng e2e." target="_self"><span>ng e2e</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/generate" title="ng generate." target="_self"><span>ng generate</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/help" title="ng help." target="_self"><span>ng help</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/lint" title="ng lint." target="_self"><span>ng lint</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/new" title="ng new." target="_self"><span>ng new</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/run" title="ng run." target="_self"><span>ng run</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/serve" title="ng serve." target="_self"><span>ng serve</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/test" title="ng test." target="_self"><span>ng test</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/update" title="ng update." target="_self"><span>ng update</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/version" title="ng version." target="_self"><span>ng version</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-2 collapsed ng-star-inserted" style="position:relative" href="cli/xi18n" title="ng xi18n." target="_self"><span>ng xi18n</span></a></div></aio-nav-item></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="api" title="关于 Angular 中类和值的详细信息。" target="_self"><span>API 参考手册</span></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><div class="mat-divider ng-star-inserted" style="margin:4px 20px;border-top:1px solid #d3d3d3"></div></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://github.com/ng-docs/ng-docs.github.io/issues" title="github 上的中文互助问答区" target="_blank"><span>互助问答</span><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://material.angular.cn" title="Angular Material 组件库的中文文档" target="_blank"><span>官方 Material 组件库</span><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://ng.ant.design/" title="Ant Design 的 Angular 实现，服务于企业级后台产品。" target="_blank"><span>ng-zorro 组件库</span><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://ng.mobile.ant.design/" title="Ant Design Mobile 的 Angular 实现，服务于无线产品。" target="_blank"><span>ng-zorro mobile 组件库</span><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item><aio-nav-item class="ng-star-inserted"><div class="ng-star-inserted"><a class="vertical-menu-item level-1 collapsed ng-star-inserted" style="position:relative" href="https://flutter-io.cn/" title="Flutter 中文文档站" target="_blank"><span>友站：Flutter 中文</span><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color ng-star-inserted" aria-hidden="true">open_in_new</mat-icon></a></div></aio-nav-item></aio-nav-menu><div class="doc-version ng-tns-c18-1"><aio-select><div class="form-select-menu"><button class="form-select-button"><span><strong></strong></span><span>stable (v9.0.0)</span></button></div></aio-select></div></div></mat-sidenav><div class="cdk-visually-hidden cdk-focus-trap-anchor" aria-hidden="true"></div><mat-sidenav-content cdkscrollable="" class="mat-drawer-content mat-sidenav-content ng-star-inserted" style="margin-left:261px"><main role="main" class="sidenav-content" id="start-data"><aio-mode-banner></aio-mode-banner><aio-doc-viewer class=""><div style="opacity:1"><div class="github-links"><a href="https://github.com/angular/angular-cn/edit/aio/aio/content/start/data.md?message=docs%3A%20请简述你的修改..." aria-label="提供编辑建议" title="提供编辑建议"><i class="material-icons" aria-hidden="true" role="img">mode_edit</i></a></div><div class="content"><h1 id="managing-data" translation-result="on">管理数据<a title="Link to this heading" class="header-link" aria-hidden="true" href="start/data#managing-data"><i class="material-icons">link</i></a></h1><aio-toc class="embedded" ng-version="9.0.0-rc.11"><div class="toc-inner no-print collapsed ng-star-inserted"><button type="button" title="Expand/collapse contents" aria-label="Expand/collapse contents" class="toc-heading embedded secondary ng-star-inserted" aria-pressed="false">目录<mat-icon role="img" svgicon="keyboard_arrow_right" class="mat-icon notranslate rotating-icon collapsed mat-icon-no-color" aria-hidden="true"><svg focusable="false" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z"></path></svg></mat-icon></button><ul class="toc-list embedded"><li class="h2 ng-star-inserted" title="服务"><a href="start/data#services">服务</a></li><li class="h2 ng-star-inserted" title="创建购物车服务"><a href="start/data#create-the-shopping-cart-service">创建购物车服务</a></li><li class="h3 ng-star-inserted" title="定义购物车服务"><a href="start/data#define-a-cart-service">定义购物车服务</a></li><li class="h3 secondary ng-star-inserted" title="使用购物车服务"><a href="start/data#use-the-cart-service">使用购物车服务</a></li><li class="h2 secondary ng-star-inserted" title="创建购物车页面"><a href="start/data#create-the-cart-page">创建购物车页面</a></li><li class="h3 secondary ng-star-inserted" title="设置该组件"><a href="start/data#set-up-the-component">设置该组件</a></li><li class="h3 secondary ng-star-inserted" title="显示购物车商品"><a href="start/data#display-the-cart-items">显示购物车商品</a></li><li class="h2 secondary ng-star-inserted" title="检索运费价格"><a href="start/data#retrieve-shipping-prices">检索运费价格</a></li><li class="h3 secondary ng-star-inserted" title="预定义的配送数据"><a href="start/data#predefined-shipping-data">预定义的配送数据</a></li><li class="h3 secondary ng-star-inserted" title="在 AppModule 中为应用启用 HttpClient"><a href="start/data#use-httpclient-in-the-appmodule">在 <code>AppModule</code> 中为应用启用 <code>HttpClient</code></a></li><li class="h3 secondary ng-star-inserted" title="在购物车服务中使用 HttpClient"><a href="start/data#use-httpclient-in-the-cart-service">在购物车服务中使用 <code>HttpClient</code></a></li><li class="h3 secondary ng-star-inserted" title="定义 get() 方法"><a href="start/data#define-the-get-method">定义 <code>get()</code> 方法</a></li><li class="h2 secondary ng-star-inserted" title="定义配送页面"><a href="start/data#define-the-shipping-page">定义配送页面</a></li><li class="h2 secondary ng-star-inserted" title="下一步"><a href="start/data#next-steps">下一步</a></li></ul><button type="button" title="Expand/collapse contents" aria-label="Expand/collapse contents" class="toc-more-items embedded material-icons collapsed ng-star-inserted" aria-pressed="false"></button></div></aio-toc><h1 translation-origin="off" id="managing-data">Managing Data<a title="Link to this heading" class="header-link" aria-hidden="true" href="start/data#managing-data"><i class="material-icons">link</i></a></h1><p translation-result="on">在<a href="start/routing" title="入门：路由">路由</a>的末尾，本应用实现了一个包含两个视图的商品名录：商品列表和商品详情。用户点击清单中的某个商品名称，就会在新视图中看到具有专门的 URL 或路由的详情页。</p><p translation-origin="off">At the end of <a href="start/routing" title="Getting Started: Routing">Routing</a>, the online store application has a product catalog with two views: a product list and product details. Users can click on a product name from the list to see details in a new view, with a distinct URL, or route.</p><p translation-result="on">本页将指导你分三个步骤创建购物车：</p><p translation-origin="off">This page guides you through creating the shopping cart in three phases:</p><ul><li><p translation-result="on">修改商品详情页，让它包含一个 “Buy” 按钮，它会把当前商品添加到由 "购物车服务" 管理的商品列表中。</p><p translation-origin="off">Update the product details page to include a "Buy" button, which adds the current product to a list of products that a cart service manages.</p></li><li><p translation-result="on">添加一个购物车组件，它会显示购物车中的商品。</p><p translation-origin="off">Add a cart component, which displays the items in the cart.</p></li><li><p translation-result="on">添加一个配送组件，它会使用 Angular 的 <code><a href="api/common/http/HttpClient" class="code-anchor">HttpClient</a></code> 从 <code>.json</code> 文件中检索配送数据来取得购物车中这些商品的运费。</p><p translation-origin="off">Add a shipping component, which retrieves shipping prices for the items in the cart by using Angular's <code><a href="api/common/http/HttpClient" class="code-anchor">HttpClient</a></code> to retrieve shipping data from a <code>.json</code> file.</p></li></ul><a id="services"></a><h2 id="services" translation-result="on">服务<a title="Link to this heading" class="header-link" aria-hidden="true" href="start/data#services"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="services">Services<a title="Link to this heading" class="header-link" aria-hidden="true" href="start/data#services"><i class="material-icons">link</i></a></h2><p translation-result="on">服务是 Angular 应用的重要组成部分。在 Angular 中，服务是一个类的实例，它可以借助 Angular 的<a href="guide/glossary#dependency-injection-di" title="依赖注入定义">依赖注入系统</a>来让应用中的任何一个部件都能使用它。</p><p translation-origin="off">Services are an integral part of Angular applications. In Angular, a service is an instance of a class that you can make available to any part of your application using Angular's <a href="guide/glossary#dependency-injection-di" title="dependency injection definition">dependency injection system</a>.</p><p translation-result="on">服务可以让你在应用的各个部件之间共享数据。对于在线商店，购物车服务就是存放购物车的数据和方法的地方。</p><p translation-origin="off">Services are the place where you share data between parts of your application. For the online store, the cart service is where you store your cart data and methods.</p><a id="create-cart-service"></a><h2 id="create-the-shopping-cart-service" translation-result="on">创建购物车服务<a title="Link to this heading" class="header-link" aria-hidden="true" href="start/data#create-the-shopping-cart-service"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="create-the-shopping-cart-service">Create the shopping cart service<a title="Link to this heading" class="header-link" aria-hidden="true" href="start/data#create-the-shopping-cart-service"><i class="material-icons">link</i></a></h2><p translation-result="on">到目前为止，用户可以查看商品信息、模拟共享，并接收商品变化的通知。但是，无法购买商品。</p><p translation-origin="off">Up to this point, users can view product information, and simulate sharing and being notified about product changes. They cannot, however, buy products.</p><p translation-result="on">在本节中，你将在商品详情页中添加“Buy”按钮。你还可以设置一个购物车服务来存储购物车中商品的相关信息。</p><p translation-origin="off">In this section, you add a "Buy" button to the product details page and set up a cart service to store information about products in the cart.</p><div class="alert is-helpful"><p translation-result="on">稍后，在本教程的<a href="start/forms" title="入门：表单">表单</a>部分，也会从用户的结账页面中访问这个 购物车服务。</p><p translation-origin="off">Later, the <a href="start/forms" title="Getting Started: Forms">Forms</a> part of this tutorial guides you through accessing this cart service from the page where the user checks out.</p></div><a id="generate-cart-service"></a><h3 id="define-a-cart-service" translation-result="on">定义购物车服务<a title="Link to this heading" class="header-link" aria-hidden="true" href="start/data#define-a-cart-service"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="define-a-cart-service">Define a cart service<a title="Link to this heading" class="header-link" aria-hidden="true" href="start/data#define-a-cart-service"><i class="material-icons">link</i></a></h3><ol><li><p translation-result="on">生成购物车服务。</p><p translation-origin="off">Generate a cart service.</p><ol><li><p translation-result="on">右键单击 <code>app</code> 文件夹，选择 <code>Angular Generator</code>，然后选择 <code>Service</code>。把新的服务命名为 <code>cart</code>。</p><p translation-origin="off">Right click on the <code>app</code> folder, choose <code>Angular Generator</code>, and choose <code>Service</code>. Name the new service <code>cart</code>.</p><code-example header="src/app/cart.service.ts" path="getting-started/src/app/cart.service.1.ts" ng-version="9.0.0-rc.11"><div style="display:none">import { <a href="api/core/Injectable" class="code-anchor">Injectable</a> } from '@angular/core'; @<a href="api/core/Injectable" class="code-anchor">Injectable</a>({ <a href="api/core/Injectable#providedIn" class="code-anchor">providedIn</a>: 'root' }) export class CartService { constructor() {} }</div><header class="ng-star-inserted">src/app/cart.service.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/cart.service.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/core/Injectable" class="code-anchor"><span class="typ">Injectable</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/core'</span><span class="pun">;</span><span class="pln">

</span><span class="lit">@</span><a href="api/core/Injectable" class="code-anchor"><span class="lit">Injectable</span></a><span class="pun">({</span><span class="pln">
  </span><a href="api/core/Injectable#providedIn" class="code-anchor"><span class="pln">providedIn</span></a><span class="pun">:</span><span class="pln"> </span><span class="str">'root'</span><span class="pln">
</span><span class="pun">})</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">CartService</span><span class="pln"> </span><span class="pun">{</span><span class="pln">

  </span><span class="kwd">constructor</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{}</span><span class="pln">

</span><span class="pun">}</span></code>
    </pre></aio-code></code-example></li><li><p translation-result="on">StackBlitz 可能会生成不带 <code>{provedIn：'root'}</code> 语句的 <code>@<a href="api/core/Injectable" class="code-anchor">Injectable</a>()</code> 装饰器。相反，此生成器默认会在 <code>app.module.ts</code> 中提供购物车服务。对于本教程来说，任何一种都可以。 不过 <code>@<a href="api/core/Injectable" class="code-anchor">Injectable</a>()</code> 的 <code>{provedIn：'root'}</code> 语法支持<a href="/guide/dependency-injection-providers#tree-shakable-providers">摇树优化</a>，但本章不展开讲。</p><p translation-origin="off">StackBlitz might generate the <code>@<a href="api/core/Injectable" class="code-anchor">Injectable</a>()</code> decorator without the <code>{ <a href="api/core/Injectable#providedIn" class="code-anchor">providedIn</a>: 'root' }</code> statement as above. Instead, the generator provides the cart service in <code>app.module.ts</code> by default. For the purposes of this tutorial, either way works. The <code>@<a href="api/core/Injectable" class="code-anchor">Injectable</a>()</code> <code>{ <a href="api/core/Injectable#providedIn" class="code-anchor">providedIn</a>: 'root' }</code> syntax allows <a href="/guide/dependency-injection-providers#tree-shakable-providers">tree shaking</a>, which is beyond the scope of this guide.</p></li></ol></li><li><p translation-result="on">在 <code>CartService</code> 类中，定义一个 <code>items</code> 属性来把当前商品的数组存储在购物车中。</p><p translation-origin="off">In the <code>CartService</code> class, define an <code>items</code> property to store the array of the current products in the cart.</p><code-example path="getting-started/src/app/cart.service.ts" header="src/app/cart.service.ts" region="props" ng-version="9.0.0-rc.11"><div style="display:none">export class CartService { items = []; }</div><header class="ng-star-inserted">src/app/cart.service.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/cart.service.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">CartService</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  items </span><span class="pun">=</span><span class="pln"> </span><span class="pun">[];</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example></li><li><p translation-result="on">定义把商品添加到购物车、返回购物车商品以及清除购物车商品的方法：</p><p translation-origin="off">Define methods to add items to the cart, return cart items, and clear the cart items:</p><code-example path="getting-started/src/app/cart.service.ts" header="src/app/cart.service.ts" region="methods" ng-version="9.0.0-rc.11"><div style="display:none">export class CartService { items = []; addToCart(product) { this.items.push(product); } getItems() { return this.items; } clearCart() { this.items = []; return this.items; } }</div><header class="ng-star-inserted">src/app/cart.service.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/cart.service.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">CartService</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  items </span><span class="pun">=</span><span class="pln"> </span><span class="pun">[];</span><span class="pln">

  addToCart</span><span class="pun">(</span><span class="pln">product</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">items</span><span class="pun">.</span><span class="pln">push</span><span class="pun">(</span><span class="pln">product</span><span class="pun">);</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">

  getItems</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">return</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">items</span><span class="pun">;</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">

  clearCart</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">items </span><span class="pun">=</span><span class="pln"> </span><span class="pun">[];</span><span class="pln">
    </span><span class="kwd">return</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">items</span><span class="pun">;</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example><ul><li><p translation-result="on"><code>addToCart()</code> 方法会将产品附加到 <code>items</code> 数组中。</p><p translation-origin="off">The <code>addToCart()</code> method appends a product to an array of <code>items</code>.</p></li><li><p translation-result="on"><code>getItems()</code> 方法会收集用户加到购物车中的商品，并返回每个商品及其数量。</p><p translation-origin="off">The <code>getItems()</code> method collects the items users add to the cart and returns each item with its associated quantity.</p></li><li><p translation-result="on"><code>clearCart()</code> 方法返回一个空数组。</p><p translation-origin="off">The <code>clearCart()</code> method returns an empty array of items.</p></li></ul></li></ol><a id="product-details-use-cart-service"></a><h3 id="use-the-cart-service" translation-result="on">使用购物车服务<a title="Link to this heading" class="header-link" aria-hidden="true" href="start/data#use-the-cart-service"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="use-the-cart-service">Use the cart service<a title="Link to this heading" class="header-link" aria-hidden="true" href="start/data#use-the-cart-service"><i class="material-icons">link</i></a></h3><p translation-result="on">本节会教你通过 “Buy” 按钮使用购物车服务来把商品添加到购物车。</p><p translation-origin="off">This section walks you through using the cart service to add a product to the cart with a "Buy" button.</p><ol><li><p translation-result="on">打开 <code>product-details.component.ts</code>。</p><p translation-origin="off">Open <code>product-details.component.ts</code>.</p></li><li><p translation-result="on">配置该组件，使其能使用这个购物车服务。</p><p translation-origin="off">Configure the component to use the cart service.</p><ol><li><p translation-result="on">导入购物车服务。</p><p translation-origin="off">Import the cart service.</p><code-example header="src/app/product-details/product-details.component.ts" path="getting-started/src/app/product-details/product-details.component.ts" region="cart-service" ng-version="9.0.0-rc.11"><div style="display:none">import { <a href="api/core/Component" class="code-anchor">Component</a>, <a href="api/core/OnInit" class="code-anchor">OnInit</a> } from '@angular/core'; import { <a href="api/router/ActivatedRoute" class="code-anchor">ActivatedRoute</a> } from '@angular/router'; import { products } from '../products'; import { CartService } from '../cart.service';</div><header class="ng-star-inserted">src/app/product-details/product-details.component.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/product-details/product-details.component.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/core/Component" class="code-anchor"><span class="typ">Component</span></a><span class="pun">,</span><span class="pln"> </span><a href="api/core/OnInit" class="code-anchor"><span class="typ">OnInit</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/core'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/router/ActivatedRoute" class="code-anchor"><span class="typ">ActivatedRoute</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/router'</span><span class="pun">;</span><span class="pln">

</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> products </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'../products'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">CartService</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'../cart.service'</span><span class="pun">;</span></code>
    </pre></aio-code></code-example></li><li><p translation-result="on">通过把购物车服务注入到这里的 <code>constructor()</code> 中来注入它。</p><p translation-origin="off">Inject the cart service by adding it to the <code>constructor()</code>.</p><code-example path="getting-started/src/app/product-details/product-details.component.ts" header="src/app/product-details/product-details.component.ts" region="inject-cart-service" ng-version="9.0.0-rc.11"><div style="display:none">export class ProductDetailsComponent implements <a href="api/core/OnInit" class="code-anchor">OnInit</a> { constructor( private route: <a href="api/router/ActivatedRoute" class="code-anchor">ActivatedRoute</a>, private cartService: CartService ) { } }</div><header class="ng-star-inserted">src/app/product-details/product-details.component.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/product-details/product-details.component.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">ProductDetailsComponent</span><span class="pln"> </span><span class="kwd">implements</span><span class="pln"> </span><a href="api/core/OnInit" class="code-anchor"><span class="typ">OnInit</span></a><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="kwd">constructor</span><span class="pun">(</span><span class="pln">
    </span><span class="kwd">private</span><span class="pln"> route</span><span class="pun">:</span><span class="pln"> </span><a href="api/router/ActivatedRoute" class="code-anchor"><span class="typ">ActivatedRoute</span></a><span class="pun">,</span><span class="pln">
    </span><span class="kwd">private</span><span class="pln"> cartService</span><span class="pun">:</span><span class="pln"> </span><span class="typ">CartService</span><span class="pln">
  </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example></li></ol></li><li><p translation-result="on">定义 <code>addToCart()</code> 方法，该方法会当前商品添加到购物车中。</p><p translation-origin="off">Define the <code>addToCart()</code> method, which adds the current product to the cart.</p><p translation-result="on"> <code>addToCart()</code> 方法会做下面这三件事：</p><p translation-origin="off">The <code>addToCart()</code> method does the following three things:</p><ul><li><p translation-result="on">接收当前的 <code>product</code>。</p><p translation-origin="off">Receives the current <code>product</code>.</p></li><li><p translation-result="on">使用购物车服务的 <code>addToCart()</code> 方法把该商品添加到购物车中。</p><p translation-origin="off">Uses the cart service's <code>addToCart()</code> method to add the product the cart.</p></li><li><p translation-result="on">显示一条消息，表明你已经把一个商品加入了购物车。</p><p translation-origin="off">Displays a message that you've added a product to the cart.</p><code-example path="getting-started/src/app/product-details/product-details.component.ts" header="src/app/product-details/product-details.component.ts" region="add-to-cart" ng-version="9.0.0-rc.11"><div style="display:none">export class ProductDetailsComponent implements <a href="api/core/OnInit" class="code-anchor">OnInit</a> { addToCart(product) { window.alert('Your product has been added to the cart!'); this.cartService.addToCart(product); } }</div><header class="ng-star-inserted">src/app/product-details/product-details.component.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/product-details/product-details.component.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">ProductDetailsComponent</span><span class="pln"> </span><span class="kwd">implements</span><span class="pln"> </span><a href="api/core/OnInit" class="code-anchor"><span class="typ">OnInit</span></a><span class="pln"> </span><span class="pun">{</span><span class="pln">
  addToCart</span><span class="pun">(</span><span class="pln">product</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    window</span><span class="pun">.</span><span class="pln">alert</span><span class="pun">(</span><span class="str">'Your product has been added to the cart!'</span><span class="pun">);</span><span class="pln">
    </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">cartService</span><span class="pun">.</span><span class="pln">addToCart</span><span class="pun">(</span><span class="pln">product</span><span class="pun">);</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example></li></ul></li><li><p translation-result="on">修改商品详情模板，让它具有一个“Buy”按钮，用于把当前商品添加到购物车中。</p><p translation-origin="off">Update the product details template with a "Buy" button that adds the current product to the cart.</p><ol><li><p translation-result="on">打开 <code>product-details.component.html</code>。</p><p translation-origin="off">Open <code>product-details.component.html</code>.</p></li><li><p translation-result="on">添加一个标签为“Buy”的按钮，并把其 <code>click()</code> 事件绑定到 <code>addToCart()</code> 方法：</p><p translation-origin="off">Add a button with the label "Buy", and bind the <code>click()</code> event to the <code>addToCart()</code> method:</p><code-example header="src/app/product-details/product-details.component.html" path="getting-started/src/app/product-details/product-details.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;h2&gt;Product Details&lt;/h2&gt; &lt;div *<a href="api/common/NgIf" class="code-anchor">ngIf</a>="product"&gt; &lt;h3&gt;{{ product.name }}&lt;/h3&gt; &lt;h4&gt;{{ product.price | <a href="api/common/CurrencyPipe" class="code-anchor">currency</a> }}&lt;/h4&gt; &lt;p&gt;{{ product.description }}&lt;/p&gt; &lt;button (click)="addToCart(product)"&gt;Buy&lt;/button&gt; &lt;/div&gt;</div><header class="ng-star-inserted">src/app/product-details/product-details.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/product-details/product-details.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;h2&gt;</span><span class="pln">Product Details</span><span class="tag">&lt;/h2&gt;</span><span class="pln">

</span><span class="tag">&lt;div</span><span class="pln"> *</span><a href="api/common/NgIf" class="code-anchor"><span class="atn">ngIf</span></a><span class="pun">=</span><span class="atv">"product"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;h3&gt;</span><span class="pln">{{ product.name }}</span><span class="tag">&lt;/h3&gt;</span><span class="pln">
  </span><span class="tag">&lt;h4&gt;</span><span class="pln">{{ product.price | </span><a href="api/common/CurrencyPipe" class="code-anchor"><span class="pln">currency</span></a><span class="pln"> }}</span><span class="tag">&lt;/h4&gt;</span><span class="pln">
  </span><span class="tag">&lt;p&gt;</span><span class="pln">{{ product.description }}</span><span class="tag">&lt;/p&gt;</span><span class="pln">

  </span><span class="tag">&lt;button</span><span class="pln"> (</span><span class="atn">click</span><span class="pln">)</span><span class="pun">=</span><span class="atv">"addToCart(product)"</span><span class="tag">&gt;</span><span class="pln">Buy</span><span class="tag">&lt;/button&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code>
    </pre></aio-code></code-example></li></ol></li><li><p translation-result="on">要查看新的“Buy”按钮，请刷新应用并单击商品名称以显示其详细信息。</p><p translation-origin="off">To see the new "Buy" button, refresh the application and click on a product's name to display its details.</p><div class="lightbox"><img src="generated/images/guide/start/product-details-buy.png" alt="Display details for selected product with a Buy button" width="259" height="233"></div></li><li><p translation-result="on">点击“Buy”按钮来把该商品添加到购物车中存储的商品列表中，并显示一条确认消息。</p><p translation-origin="off">Click the "Buy" button to add the product to the stored list of items in the cart and display a confirmation message.</p><div class="lightbox"><img src="generated/images/guide/start/buy-alert.png" alt="Display details for selected product with a Buy button" width="329" height="106"></div></li></ol><h2 id="create-the-cart-page" translation-result="on">创建购物车页面<a title="Link to this heading" class="header-link" aria-hidden="true" href="start/data#create-the-cart-page"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="create-the-cart-page">Create the cart page<a title="Link to this heading" class="header-link" aria-hidden="true" href="start/data#create-the-cart-page"><i class="material-icons">link</i></a></h2><p translation-result="on">此时，用户可以通过点击“Buy”来把商品放入购物车，但他们还看不到购物车。</p><p translation-origin="off">At this point, users can put items in the cart by clicking "Buy", but they can't yet see their cart.</p><p translation-result="on">分两步创建购物车页面：</p><p translation-origin="off">Create the cart page in two steps:</p><ol><li><p translation-result="on">创建一个购物车组件并配置指向这个新组件的路由。此时，购物车页面只会显示默认文本。</p><p translation-origin="off">Create a cart component and configure routing to the new component. At this point, the cart page will only have default text.</p></li><li><p translation-result="on">显示购物车商品</p><p translation-origin="off">Display the cart items.</p></li></ol><h3 id="set-up-the-component" translation-result="on">设置该组件<a title="Link to this heading" class="header-link" aria-hidden="true" href="start/data#set-up-the-component"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="set-up-the-component">Set up the component<a title="Link to this heading" class="header-link" aria-hidden="true" href="start/data#set-up-the-component"><i class="material-icons">link</i></a></h3><p translation-result="on">要创建购物车页面，首先要执行与创建商品详情组件相同的步骤，并为这个新组件设置路由。</p><p translation-origin="off">To create the cart page, begin by following the same steps you did to create the product details component and configure routing for the new component.</p><ol><li><p translation-result="on">生成一个名叫 <code>cart</code> 的购物车组件。</p><p translation-origin="off">Generate a cart component, named <code>cart</code>.</p><p translation-result="on">提示：在文件列表框中，右键单击 <code>app</code> 文件夹，选择 <code>Angular Generator</code> 和 <code><a href="api/core/Component" class="code-anchor">Component</a></code>。</p><p translation-origin="off">Reminder: In the file list, right-click the <code>app</code> folder, choose <code>Angular Generator</code> and <code><a href="api/core/Component" class="code-anchor">Component</a></code>.</p><code-example header="src/app/cart/cart.component.ts" path="getting-started/src/app/cart/cart.component.1.ts" ng-version="9.0.0-rc.11"><div style="display:none">import { <a href="api/core/Component" class="code-anchor">Component</a>, <a href="api/core/OnInit" class="code-anchor">OnInit</a> } from '@angular/core'; @<a href="api/core/Component" class="code-anchor">Component</a>({ selector: 'app-cart', <a href="api/core/Component#templateUrl" class="code-anchor">templateUrl</a>: './cart.component.html', <a href="api/core/Component#styleUrls" class="code-anchor">styleUrls</a>: ['./cart.component.css'] }) export class CartComponent implements <a href="api/core/OnInit" class="code-anchor">OnInit</a> { constructor() { } ngOnInit() { } }</div><header class="ng-star-inserted">src/app/cart/cart.component.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/cart/cart.component.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/core/Component" class="code-anchor"><span class="typ">Component</span></a><span class="pun">,</span><span class="pln"> </span><a href="api/core/OnInit" class="code-anchor"><span class="typ">OnInit</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/core'</span><span class="pun">;</span><span class="pln">

</span><span class="lit">@</span><a href="api/core/Component" class="code-anchor"><span class="lit">Component</span></a><span class="pun">({</span><span class="pln">
  selector</span><span class="pun">:</span><span class="pln"> </span><span class="str">'app-cart'</span><span class="pun">,</span><span class="pln">
  </span><a href="api/core/Component#templateUrl" class="code-anchor"><span class="pln">templateUrl</span></a><span class="pun">:</span><span class="pln"> </span><span class="str">'./cart.component.html'</span><span class="pun">,</span><span class="pln">
  </span><a href="api/core/Component#styleUrls" class="code-anchor"><span class="pln">styleUrls</span></a><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="str">'./cart.component.css'</span><span class="pun">]</span><span class="pln">
</span><span class="pun">})</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">CartComponent</span><span class="pln"> </span><span class="kwd">implements</span><span class="pln"> </span><a href="api/core/OnInit" class="code-anchor"><span class="typ">OnInit</span></a><span class="pln"> </span><span class="pun">{</span><span class="pln">

  </span><span class="kwd">constructor</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="pun">}</span><span class="pln">

  ngOnInit</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">

</span><span class="pun">}</span></code>
    </pre></aio-code></code-example></li><li><p translation-result="on">为购物车组件添加路由（URL 模式）。</p><p translation-origin="off">Add routing (a URL pattern) for the cart component.</p><p translation-result="on">打开 <code>app.module.ts</code>，为组件 <code>CartComponent</code> 添加一个路由，其路由为 <code>cart</code> ：</p><p translation-origin="off">Open <code>app.module.ts</code> and add a route for the component <code>CartComponent</code>, with a <code>path</code> of <code>cart</code>:</p><code-example header="src/app/app.module.ts" path="getting-started/src/app/app.module.ts" region="cart-route" ng-version="9.0.0-rc.11"><div style="display:none">@<a href="api/core/NgModule" class="code-anchor">NgModule</a>({ imports: [ <a href="api/platform-browser/BrowserModule" class="code-anchor">BrowserModule</a>, <a href="api/forms/ReactiveFormsModule" class="code-anchor">ReactiveFormsModule</a>, RouterModule.forRoot([ { path: '', component: ProductListComponent }, { path: 'products/:productId', component: ProductDetailsComponent }, { path: 'cart', component: CartComponent }, ]) ],</div><header class="ng-star-inserted">src/app/app.module.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.module.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="lit">@</span><a href="api/core/NgModule" class="code-anchor"><span class="lit">NgModule</span></a><span class="pun">({</span><span class="pln">
  imports</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
    </span><a href="api/platform-browser/BrowserModule" class="code-anchor"><span class="typ">BrowserModule</span></a><span class="pun">,</span><span class="pln">
    </span><a href="api/forms/ReactiveFormsModule" class="code-anchor"><span class="typ">ReactiveFormsModule</span></a><span class="pun">,</span><span class="pln">
    </span><span class="typ">RouterModule</span><span class="pun">.</span><span class="pln">forRoot</span><span class="pun">([</span><span class="pln">
      </span><span class="pun">{</span><span class="pln"> path</span><span class="pun">:</span><span class="pln"> </span><span class="str">''</span><span class="pun">,</span><span class="pln"> component</span><span class="pun">:</span><span class="pln"> </span><span class="typ">ProductListComponent</span><span class="pln"> </span><span class="pun">},</span><span class="pln">
      </span><span class="pun">{</span><span class="pln"> path</span><span class="pun">:</span><span class="pln"> </span><span class="str">'products/:productId'</span><span class="pun">,</span><span class="pln"> component</span><span class="pun">:</span><span class="pln"> </span><span class="typ">ProductDetailsComponent</span><span class="pln"> </span><span class="pun">},</span><span class="pln">
      </span><span class="pun">{</span><span class="pln"> path</span><span class="pun">:</span><span class="pln"> </span><span class="str">'cart'</span><span class="pun">,</span><span class="pln"> component</span><span class="pun">:</span><span class="pln"> </span><span class="typ">CartComponent</span><span class="pln"> </span><span class="pun">},</span><span class="pln">
    </span><span class="pun">])</span><span class="pln">
  </span><span class="pun">],</span></code>
    </pre></aio-code></code-example><ol><li><p translation-result="on">要查看新的购物车组件，请点击“Checkout”按钮。你会看到默认文本“cart works!”，该 URL 的格式为 <code>https://getting-started.stackblitz.io/cart</code>，其中的 getting-started.stackblitz.io 部分可能与你的 StackBlitz 项目不同。</p><p translation-origin="off">To see the new cart component, click the "Checkout" button. You can see the "cart works!" default text, and the URL has the pattern <code>https://getting-started.stackblitz.io/cart</code>, where <code>getting-started.stackblitz.io</code> may be different for your StackBlitz project.</p><div class="alert is-helpful"><p translation-result="on">“Checkout” 按钮的起始代码已经在顶栏组件中包含了一个指向 <code>/cart</code> 的 <code><a href="api/router/RouterLink" class="code-anchor">routerLink</a></code>。</p><p translation-origin="off">The starter code for the "Checkout" button already includes a <code><a href="api/router/RouterLink" class="code-anchor">routerLink</a></code> for <code>/cart</code> the top-bar component.</p></div></li></ol><div class="lightbox"><img src="generated/images/guide/start/cart-works.png" alt="Display cart page before customizing" width="259" height="193"></div></li></ol><h3 id="display-the-cart-items" translation-result="on">显示购物车商品<a title="Link to this heading" class="header-link" aria-hidden="true" href="start/data#display-the-cart-items"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="display-the-cart-items">Display the cart items<a title="Link to this heading" class="header-link" aria-hidden="true" href="start/data#display-the-cart-items"><i class="material-icons">link</i></a></h3><p translation-result="on">你可以用服务来跨组件共享数据：</p><p translation-origin="off">You can use services to share data across components:</p><ul><li><p translation-result="on">商品详情组件已经使用了购物车服务（ <code>CartService</code> ）来把商品添加到购物车中。</p><p translation-origin="off">The product details component already uses the cart service to add products to the cart.</p></li><li><p translation-result="on">本节将告诉你如何修改购物车组件以使用购物车服务来显示购物车中的商品。</p><p translation-origin="off">This section shows you how to use the cart service to display the products in the cart.</p></li></ul><ol><li><p translation-result="on">打开 <code>cart.component.ts</code>。</p><p translation-origin="off">Open <code>cart.component.ts</code>.</p></li><li><p translation-result="on">设置该组件是为了让它能够使用这个购物车服务。（这与你在前面设置商品详情组件以使用购物车服务的方式是一样的。）</p><p translation-origin="off">Configure the component to use the cart service.</p><ol><li><p translation-result="on">从 <code>cart.service.ts</code> 文件中导入 <code>CartService</code>。</p><p translation-origin="off">Import the <code>CartService</code> from the <code>cart.service.ts</code> file.</p><code-example header="src/app/cart/cart.component.ts" path="getting-started/src/app/cart/cart.component.2.ts" region="imports" ng-version="9.0.0-rc.11"><div style="display:none">import { <a href="api/core/Component" class="code-anchor">Component</a> } from '@angular/core'; import { CartService } from '../cart.service';</div><header class="ng-star-inserted">src/app/cart/cart.component.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/cart/cart.component.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/core/Component" class="code-anchor"><span class="typ">Component</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/core'</span><span class="pun">;</span><span class="pln">
</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">CartService</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'../cart.service'</span><span class="pun">;</span></code>
    </pre></aio-code></code-example></li><li><p translation-result="on">注入 <code>CartService</code>，以便购物车组件可以使用它。</p><p translation-origin="off">Inject the <code>CartService</code> so that the cart component can use it.</p><code-example path="getting-started/src/app/cart/cart.component.2.ts" header="src/app/cart/cart.component.ts" region="inject-cart" ng-version="9.0.0-rc.11"><div style="display:none">export class CartComponent { constructor( private cartService: CartService ) { } }</div><header class="ng-star-inserted">src/app/cart/cart.component.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/cart/cart.component.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">CartComponent</span><span class="pln"> </span><span class="pun">{</span><span class="pln">

  </span><span class="kwd">constructor</span><span class="pun">(</span><span class="pln">
    </span><span class="kwd">private</span><span class="pln"> cartService</span><span class="pun">:</span><span class="pln"> </span><span class="typ">CartService</span><span class="pln">
  </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example></li></ol></li><li><p translation-result="on">定义 <code>items</code> 属性，以便把商品存放在购物车中。</p><p translation-origin="off">Define the <code>items</code> property to store the products in the cart.</p><code-example path="getting-started/src/app/cart/cart.component.2.ts" header="src/app/cart/cart.component.ts" region="items" ng-version="9.0.0-rc.11"><div style="display:none">export class CartComponent { items; constructor( private cartService: CartService ) { } }</div><header class="ng-star-inserted">src/app/cart/cart.component.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/cart/cart.component.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">CartComponent</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  items</span><span class="pun">;</span><span class="pln">

  </span><span class="kwd">constructor</span><span class="pun">(</span><span class="pln">
    </span><span class="kwd">private</span><span class="pln"> cartService</span><span class="pun">:</span><span class="pln"> </span><span class="typ">CartService</span><span class="pln">
  </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example></li><li><p translation-result="on">使用购物车服务的 <code>getItems()</code> 方法设置这些商品。回想一下，你<a href="start/data#generate-cart-service">在生成 <code>cart.service.ts</code> 时</a>定义过这个方法。</p><p translation-origin="off">Set the items using the cart service's <code>getItems()</code> method. Recall that you defined this method <a href="start/data#generate-cart-service">when you generated <code>cart.service.ts</code></a>.</p><p translation-result="on">所生成的 <code>CartComponent</code> 类是这样的：</p><p translation-origin="off">The resulting <code>CartComponent</code> class is as follows:</p><code-example path="getting-started/src/app/cart/cart.component.3.ts" header="src/app/cart/cart.component.ts" region="props-services" ng-version="9.0.0-rc.11"><div style="display:none">export class CartComponent implements <a href="api/core/OnInit" class="code-anchor">OnInit</a> { items; constructor( private cartService: CartService ) { } ngOnInit() { this.items = this.cartService.getItems(); } }</div><header class="ng-star-inserted">src/app/cart/cart.component.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/cart/cart.component.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">CartComponent</span><span class="pln"> </span><span class="kwd">implements</span><span class="pln"> </span><a href="api/core/OnInit" class="code-anchor"><span class="typ">OnInit</span></a><span class="pln"> </span><span class="pun">{</span><span class="pln">
  items</span><span class="pun">;</span><span class="pln">

  </span><span class="kwd">constructor</span><span class="pun">(</span><span class="pln">
    </span><span class="kwd">private</span><span class="pln"> cartService</span><span class="pun">:</span><span class="pln"> </span><span class="typ">CartService</span><span class="pln">
  </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="pun">}</span><span class="pln">

  ngOnInit</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">items </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">cartService</span><span class="pun">.</span><span class="pln">getItems</span><span class="pun">();</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example></li><li><p translation-result="on">修改模板，加上标题，用带有 <code>*<a href="api/common/NgForOf" class="code-anchor">ngFor</a></code> 的 <code>&lt;div&gt;</code> 来显示每个购物车商品的名字和价格。</p><p translation-origin="off">Update the template with a header, and use a <code>&lt;div&gt;</code> with an <code>*<a href="api/common/NgForOf" class="code-anchor">ngFor</a></code> to display each of the cart items with its name and price.</p><p translation-result="on">生成的 <code>CartComponent</code> 模板如下：</p><p translation-origin="off">The resulting <code>CartComponent</code> template is as follows:</p><code-example header="src/app/cart/cart.component.html" path="getting-started/src/app/cart/cart.component.2.html" region="prices" ng-version="9.0.0-rc.11"><div style="display:none">&lt;h3&gt;Cart&lt;/h3&gt; &lt;div class="cart-item" *<a href="api/common/NgForOf" class="code-anchor">ngFor</a>="let <a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a> of items"&gt; &lt;span&gt;{{ item.name }}&lt;/span&gt; &lt;span&gt;{{ item.price | <a href="api/common/CurrencyPipe" class="code-anchor">currency</a> }}&lt;/span&gt; &lt;/div&gt;</div><header class="ng-star-inserted">src/app/cart/cart.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/cart/cart.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;h3&gt;</span><span class="pln">Cart</span><span class="tag">&lt;/h3&gt;</span><span class="pln">

</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"cart-item"</span><span class="pln"> *</span><a href="api/common/NgForOf" class="code-anchor"><span class="atn">ngFor</span></a><span class="pun">=</span><span class="atv">"let </span><a href="api/core/IterableChangeRecord#item" class="code-anchor"><span class="atv">item</span></a><span class="atv"> of items"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;span&gt;</span><span class="pln">{{ item.name }}</span><span class="tag">&lt;/span&gt;</span><span class="pln">
  </span><span class="tag">&lt;span&gt;</span><span class="pln">{{ item.price | </span><a href="api/common/CurrencyPipe" class="code-anchor"><span class="pln">currency</span></a><span class="pln"> }}</span><span class="tag">&lt;/span&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code>
    </pre></aio-code></code-example></li><li><p translation-result="on">测试你的购物车组件。</p><p translation-origin="off">Test your cart component.</p><ol><li><p translation-result="on">点击“My Store”，进入商品列表页面。</p><p translation-origin="off">Click on "My Store" to go to the product list page.</p></li><li><p translation-result="on">单击商品名称以显示其详细信息。</p><p translation-origin="off">Click on a product name to display its details.</p></li><li><p translation-result="on">点击“Buy”，即可将商品添加到购物车。</p><p translation-origin="off">Click "Buy" to add the product to the cart.</p></li><li><p translation-result="on">点击“Checkout”查看购物车。</p><p translation-origin="off">Click "Checkout" to see the cart.</p></li><li><p translation-result="on">要添加其它商品，请点击“My Store”返回商品列表。</p><p translation-origin="off">To add another product, click "My Store" to return to the product list.</p></li></ol><p translation-result="on">重复上述步骤来添加更多条目。</p><p translation-origin="off">Repeat to add more items to the cart.</p><div class="lightbox"><img src="generated/images/guide/start/cart-page-full.png" alt="Cart page with products added" width="259" height="238"></div></li></ol><div class="alert is-helpful"><p translation-result="on">StackBlitz 提示：只要预览刷新，就会清除购物车。如果你对该应用进行了更改，页面就会刷新，你需要重新购买商品来填充购物车。</p><p translation-origin="off">StackBlitz tip: Any time the preview refreshes, the cart is cleared. If you make changes to the app, the page refreshes, so you'll need to buy products again to populate the cart.</p></div><div class="alert is-helpful"><p translation-result="on">要了解关于<a href="guide/architecture-services" title="架构>服务简介和 DI">服务</a>的更多信息，请参阅<a href="guide/architecture-services" title="架构>服务简介和 DI">“服务和依赖注入简介”</a>。</p><p translation-origin="off">For more information about services, see <a href="guide/architecture-services" title="Architecture > Intro to Services and DI">Introduction to Services and Dependency Injection</a>.</p></div><h2 id="retrieve-shipping-prices" translation-result="on">检索运费价格<a title="Link to this heading" class="header-link" aria-hidden="true" href="start/data#retrieve-shipping-prices"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="retrieve-shipping-prices">Retrieve shipping prices<a title="Link to this heading" class="header-link" aria-hidden="true" href="start/data#retrieve-shipping-prices"><i class="material-icons">link</i></a></h2><p translation-result="on">服务器通常采用流的形式返回数据。 流是很有用的，因为它们可以很容易地转换返回的数据，也可以修改你请求数据的方式。 Angular 的 HTTP 客户端（ <code><a href="api/common/http/HttpClient" class="code-anchor">HttpClient</a></code> ）是一种内置的方式，可以从外部 API 中获取数据，并以流的形式提供给你的应用。</p><p translation-origin="off">Servers often return data in the form of a stream. Streams are useful because they make it easy to transform the returned data and make modifications to the way you request that data. The Angular HTTP client, <code><a href="api/common/http/HttpClient" class="code-anchor">HttpClient</a></code>, is a built-in way to fetch data from external APIs and provide them to your app as a stream.</p><p translation-result="on">本节会为你展示如何使用 HTTP 客户端从外部文件中检索运费。</p><p translation-origin="off">This section shows you how to use the HTTP client to retrieve shipping prices from an external file.</p><h3 id="predefined-shipping-data" translation-result="on">预定义的配送数据<a title="Link to this heading" class="header-link" aria-hidden="true" href="start/data#predefined-shipping-data"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="predefined-shipping-data">Predefined shipping data<a title="Link to this heading" class="header-link" aria-hidden="true" href="start/data#predefined-shipping-data"><i class="material-icons">link</i></a></h3><p translation-result="on">在本指南的 StackBlitz 应用中，通过 <code>assets/shipping.json</code> 文件提供了一些预定义的配送数据。你可以利用这些数据为购物车中的商品添加运费。</p><p translation-origin="off">The app StackBlitz generates for this guide comes with predefined shipping data in <code>assets/shipping.json</code>. Use this data to add shipping prices for items in the cart.</p><code-example header="src/assets/shipping.json" path="getting-started/src/assets/shipping.json" ng-version="9.0.0-rc.11"><div style="display:none">[ { "type": "Overnight", "price": 25.99 }, { "type": "2-Day", "price": 9.99 }, { "type": "Postal", "price": 2.99 } ]</div><header class="ng-star-inserted">src/assets/shipping.json</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/assets/shipping.json">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="pun">[</span><span class="pln">
  </span><span class="pun">{</span><span class="pln">
    </span><span class="str">"type"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"Overnight"</span><span class="pun">,</span><span class="pln">
    </span><span class="str">"price"</span><span class="pun">:</span><span class="pln"> </span><span class="lit">25.99</span><span class="pln">
  </span><span class="pun">},</span><span class="pln">
  </span><span class="pun">{</span><span class="pln">
    </span><span class="str">"type"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"2-Day"</span><span class="pun">,</span><span class="pln">
    </span><span class="str">"price"</span><span class="pun">:</span><span class="pln"> </span><span class="lit">9.99</span><span class="pln">
  </span><span class="pun">},</span><span class="pln">
  </span><span class="pun">{</span><span class="pln">
    </span><span class="str">"type"</span><span class="pun">:</span><span class="pln"> </span><span class="str">"Postal"</span><span class="pun">,</span><span class="pln">
    </span><span class="str">"price"</span><span class="pun">:</span><span class="pln"> </span><span class="lit">2.99</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">]</span></code>
    </pre></aio-code></code-example><h3 id="use-httpclient-in-the-appmodule" translation-result="on">在 <code>AppModule</code> 中为应用启用 <code><a href="api/common/http/HttpClient" class="code-anchor">HttpClient</a></code><a title="Link to this heading" class="header-link" aria-hidden="true" href="start/data#use-httpclient-in-the-appmodule"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="use-httpclient-in-the-appmodule">Use <code><a href="api/common/http/HttpClient" class="code-anchor">HttpClient</a></code> in the <code>AppModule</code><a title="Link to this heading" class="header-link" aria-hidden="true" href="start/data#use-httpclient-in-the-appmodule"><i class="material-icons">link</i></a></h3><p translation-result="on">在使用 Angular 的 HTTP 客户端之前，你必须先配置你的应用来使用 <code><a href="api/common/http/HttpClientModule" class="code-anchor">HttpClientModule</a></code>。</p><p translation-origin="off">Before you can use Angular's HTTP client, you must configure your app to use <code><a href="api/common/http/HttpClientModule" class="code-anchor">HttpClientModule</a></code>.</p><p translation-result="on">Angular 的 <code><a href="api/common/http/HttpClientModule" class="code-anchor">HttpClientModule</a></code> 中注册了在整个应用中使用 <code><a href="api/common/http/HttpClient" class="code-anchor">HttpClient</a></code> 服务的单个实例所需的服务提供商。</p><p translation-origin="off">Angular's <code><a href="api/common/http/HttpClientModule" class="code-anchor">HttpClientModule</a></code> registers the providers your app needs to use a single instance of the <code><a href="api/common/http/HttpClient" class="code-anchor">HttpClient</a></code> service throughout your app.</p><ol><li><p translation-result="on">打开 <code>app.module.ts</code>。</p><p translation-origin="off">Open <code>app.module.ts</code>.</p><p translation-result="on">该文件包含可供整个应用使用的导入对象和功能。</p><p translation-origin="off">This file contains imports and functionality that is available to the entire app.</p></li><li><p translation-result="on">在该文件的顶部从 <code>@angular/common/<a href="api/common/http" class="code-anchor">http</a></code> 包中导入 <code><a href="api/common/http/HttpClientModule" class="code-anchor">HttpClientModule</a></code> 以及其它导入项。 由于有很多其它导入项，因此这里的代码片段省略它们，以保持简洁。请确保现有的导入都还在原地。</p><p translation-origin="off">Import <code><a href="api/common/http/HttpClientModule" class="code-anchor">HttpClientModule</a></code> from the <code>@angular/common/<a href="api/common/http" class="code-anchor">http</a></code> package at the top of the file with the other imports. As there are a number of other imports, this code snippet omits them for brevity. Be sure to leave the existing imports in place.</p><code-example header="src/app/app.module.ts" path="getting-started/src/app/app.module.ts" region="http-client-module-import" ng-version="9.0.0-rc.11"><div style="display:none">import { <a href="api/common/http/HttpClientModule" class="code-anchor">HttpClientModule</a> } from '@angular/common/<a href="api/common/http" class="code-anchor">http</a>';</div><header class="ng-star-inserted">src/app/app.module.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.module.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/common/http/HttpClientModule" class="code-anchor"><span class="typ">HttpClientModule</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/common/</span><a href="api/common/http" class="code-anchor"><span class="str">http</span></a><span class="str">'</span><span class="pun">;</span></code>
    </pre></aio-code></code-example></li><li><p translation-result="on">把 <code><a href="api/common/http/HttpClientModule" class="code-anchor">HttpClientModule</a></code> 添加到 <code>AppModule</code> <code>@<a href="api/core/NgModule" class="code-anchor">NgModule</a>()</code> 的 <code>imports</code> 数组中，以便全局注册 Angular 的 <code><a href="api/common/http/HttpClient" class="code-anchor">HttpClient</a></code>。</p><p translation-origin="off">Add <code><a href="api/common/http/HttpClientModule" class="code-anchor">HttpClientModule</a></code> to the <code>AppModule</code> <code>@<a href="api/core/NgModule" class="code-anchor">NgModule</a>()</code> <code>imports</code> array to register Angular's <code><a href="api/common/http/HttpClient" class="code-anchor">HttpClient</a></code> providers globally.</p><code-example path="getting-started/src/app/app.module.ts" header="src/app/app.module.ts" region="http-client-module" ng-version="9.0.0-rc.11"><div style="display:none">@<a href="api/core/NgModule" class="code-anchor">NgModule</a>({ imports: [ <a href="api/platform-browser/BrowserModule" class="code-anchor">BrowserModule</a>, <a href="api/common/http/HttpClientModule" class="code-anchor">HttpClientModule</a>, <a href="api/forms/ReactiveFormsModule" class="code-anchor">ReactiveFormsModule</a>, RouterModule.forRoot([ { path: '', component: ProductListComponent }, { path: 'products/:productId', component: ProductDetailsComponent }, { path: 'cart', component: CartComponent }, ]) ], declarations: [ AppComponent, TopBarComponent, ProductListComponent, ProductAlertsComponent, ProductDetailsComponent, CartComponent, ], bootstrap: [ AppComponent ] }) export class AppModule { }</div><header class="ng-star-inserted">src/app/app.module.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.module.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="lit">@</span><a href="api/core/NgModule" class="code-anchor"><span class="lit">NgModule</span></a><span class="pun">({</span><span class="pln">
  imports</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
    </span><a href="api/platform-browser/BrowserModule" class="code-anchor"><span class="typ">BrowserModule</span></a><span class="pun">,</span><span class="pln">
    </span><a href="api/common/http/HttpClientModule" class="code-anchor"><span class="typ">HttpClientModule</span></a><span class="pun">,</span><span class="pln">
    </span><a href="api/forms/ReactiveFormsModule" class="code-anchor"><span class="typ">ReactiveFormsModule</span></a><span class="pun">,</span><span class="pln">
    </span><span class="typ">RouterModule</span><span class="pun">.</span><span class="pln">forRoot</span><span class="pun">([</span><span class="pln">
      </span><span class="pun">{</span><span class="pln"> path</span><span class="pun">:</span><span class="pln"> </span><span class="str">''</span><span class="pun">,</span><span class="pln"> component</span><span class="pun">:</span><span class="pln"> </span><span class="typ">ProductListComponent</span><span class="pln"> </span><span class="pun">},</span><span class="pln">
      </span><span class="pun">{</span><span class="pln"> path</span><span class="pun">:</span><span class="pln"> </span><span class="str">'products/:productId'</span><span class="pun">,</span><span class="pln"> component</span><span class="pun">:</span><span class="pln"> </span><span class="typ">ProductDetailsComponent</span><span class="pln"> </span><span class="pun">},</span><span class="pln">
      </span><span class="pun">{</span><span class="pln"> path</span><span class="pun">:</span><span class="pln"> </span><span class="str">'cart'</span><span class="pun">,</span><span class="pln"> component</span><span class="pun">:</span><span class="pln"> </span><span class="typ">CartComponent</span><span class="pln"> </span><span class="pun">},</span><span class="pln">
    </span><span class="pun">])</span><span class="pln">
  </span><span class="pun">],</span><span class="pln">
  declarations</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
    </span><span class="typ">AppComponent</span><span class="pun">,</span><span class="pln">
    </span><span class="typ">TopBarComponent</span><span class="pun">,</span><span class="pln">
    </span><span class="typ">ProductListComponent</span><span class="pun">,</span><span class="pln">
    </span><span class="typ">ProductAlertsComponent</span><span class="pun">,</span><span class="pln">
    </span><span class="typ">ProductDetailsComponent</span><span class="pun">,</span><span class="pln">
    </span><span class="typ">CartComponent</span><span class="pun">,</span><span class="pln">
  </span><span class="pun">],</span><span class="pln">
  bootstrap</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
    </span><span class="typ">AppComponent</span><span class="pln">
  </span><span class="pun">]</span><span class="pln">
</span><span class="pun">})</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">AppModule</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="pun">}</span></code>
    </pre></aio-code></code-example></li></ol><h3 id="use-httpclient-in-the-cart-service" translation-result="on">在购物车服务中使用 <code><a href="api/common/http/HttpClient" class="code-anchor">HttpClient</a></code><a title="Link to this heading" class="header-link" aria-hidden="true" href="start/data#use-httpclient-in-the-cart-service"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="use-httpclient-in-the-cart-service">Use <code><a href="api/common/http/HttpClient" class="code-anchor">HttpClient</a></code> in the cart service<a title="Link to this heading" class="header-link" aria-hidden="true" href="start/data#use-httpclient-in-the-cart-service"><i class="material-icons">link</i></a></h3><p translation-result="on"><code>AppModule</code> 已经导入了 <code><a href="api/common/http/HttpClientModule" class="code-anchor">HttpClientModule</a></code>，接下来就是将 <code><a href="api/common/http/HttpClient" class="code-anchor">HttpClient</a></code> 服务注入到你的服务中，以便此应用可以获取数据并与外部 API 和资源进行交互。</p><p translation-origin="off">Now that the <code>AppModule</code> imports the <code><a href="api/common/http/HttpClientModule" class="code-anchor">HttpClientModule</a></code>, the next step is to inject the <code><a href="api/common/http/HttpClient" class="code-anchor">HttpClient</a></code> service into your service so your app can fetch data and interact with external APIs and resources.</p><ol><li><p translation-result="on">打开 <code>cart.service.ts</code>。</p><p translation-origin="off">Open <code>cart.service.ts</code>.</p></li><li><p translation-result="on">从 <code>@angular/common/<a href="api/common/http" class="code-anchor">http</a></code> 包中导入 <code><a href="api/common/http/HttpClient" class="code-anchor">HttpClient</a></code>。</p><p translation-origin="off">Import <code><a href="api/common/http/HttpClient" class="code-anchor">HttpClient</a></code> from the <code>@angular/common/<a href="api/common/http" class="code-anchor">http</a></code> package.</p><code-example header="src/app/cart.service.ts" path="getting-started/src/app/cart.service.ts" region="import-http" ng-version="9.0.0-rc.11"><div style="display:none">import { <a href="api/core/Injectable" class="code-anchor">Injectable</a> } from '@angular/core'; import { <a href="api/common/http/HttpClient" class="code-anchor">HttpClient</a> } from '@angular/common/<a href="api/common/http" class="code-anchor">http</a>';</div><header class="ng-star-inserted">src/app/cart.service.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/cart.service.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/core/Injectable" class="code-anchor"><span class="typ">Injectable</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/core'</span><span class="pun">;</span><span class="pln">

</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/common/http/HttpClient" class="code-anchor"><span class="typ">HttpClient</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/common/</span><a href="api/common/http" class="code-anchor"><span class="str">http</span></a><span class="str">'</span><span class="pun">;</span></code>
    </pre></aio-code></code-example></li><li><p translation-result="on">把 <code><a href="api/common/http/HttpClient" class="code-anchor">HttpClient</a></code> 注入到 <code>CartService</code> 的构造函数中：</p><p translation-origin="off">Inject <code><a href="api/common/http/HttpClient" class="code-anchor">HttpClient</a></code> into the <code>CartService</code> constructor:</p><code-example path="getting-started/src/app/cart.service.ts" header="src/app/cart.service.ts" region="inject-http" ng-version="9.0.0-rc.11"><div style="display:none">export class CartService { items = []; constructor( private <a href="api/common/http" class="code-anchor">http</a>: <a href="api/common/http/HttpClient" class="code-anchor">HttpClient</a> ) {} }</div><header class="ng-star-inserted">src/app/cart.service.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/cart.service.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">CartService</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  items </span><span class="pun">=</span><span class="pln"> </span><span class="pun">[];</span><span class="pln">

  </span><span class="kwd">constructor</span><span class="pun">(</span><span class="pln">
    </span><span class="kwd">private</span><span class="pln"> </span><a href="api/common/http" class="code-anchor"><span class="pln">http</span></a><span class="pun">:</span><span class="pln"> </span><a href="api/common/http/HttpClient" class="code-anchor"><span class="typ">HttpClient</span></a><span class="pln">
  </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{}</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example></li></ol><h3 id="define-the-get-method" translation-result="on">定义 <code>get()</code> 方法<a title="Link to this heading" class="header-link" aria-hidden="true" href="start/data#define-the-get-method"><i class="material-icons">link</i></a></h3><h3 translation-origin="off" id="define-the-get-method">Define the <code>get()</code> method<a title="Link to this heading" class="header-link" aria-hidden="true" href="start/data#define-the-get-method"><i class="material-icons">link</i></a></h3><p translation-result="on">多个组件可以使用同一个服务。在这个教程的后半部分，商品配送组件使用该购物车服务从 <code>shipping.json</code> 文件中借助 HTTP 检索配送数据。 首先要定义一个 <code>get()</code> 方法。</p><p translation-origin="off">Multiple components can leverage the same service. Later in this tutorial, the shipping component uses the cart service to retrieve shipping data via HTTP from the <code>shipping.json</code> file. First, define a <code>get()</code> method.</p><ol><li><p translation-result="on">继续在 <code>cart.service.ts</code> 中工作。</p><p translation-origin="off">Continue working in <code>cart.service.ts</code>.</p></li><li><p translation-result="on">在 <code>clearCart()</code> 方法下面，定义一个新的 <code>getShippingPrices()</code> 方法，该方法使用 <code><a href="api/common/http/HttpClient" class="code-anchor">HttpClient</a>#get()</code> 方法检索配送数据（类型和价格）。</p><p translation-origin="off">Below the <code>clearCart()</code> method, define a new <code>getShippingPrices()</code> method that uses the <code><a href="api/common/http/HttpClient" class="code-anchor">HttpClient</a></code> <code>get()</code> method to retrieve the shipping data.</p><code-example header="src/app/cart.service.ts" path="getting-started/src/app/cart.service.ts" region="get-shipping" ng-version="9.0.0-rc.11"><div style="display:none">export class CartService { items = []; constructor( private <a href="api/common/http" class="code-anchor">http</a>: <a href="api/common/http/HttpClient" class="code-anchor">HttpClient</a> ) {} addToCart(product) { this.items.push(product); } getItems() { return this.items; } clearCart() { this.items = []; return this.items; } getShippingPrices() { return this.http.get('/assets/shipping.json'); } }</div><header class="ng-star-inserted">src/app/cart.service.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/cart.service.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">CartService</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  items </span><span class="pun">=</span><span class="pln"> </span><span class="pun">[];</span><span class="pln">

  </span><span class="kwd">constructor</span><span class="pun">(</span><span class="pln">
    </span><span class="kwd">private</span><span class="pln"> </span><a href="api/common/http" class="code-anchor"><span class="pln">http</span></a><span class="pun">:</span><span class="pln"> </span><a href="api/common/http/HttpClient" class="code-anchor"><span class="typ">HttpClient</span></a><span class="pln">
  </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{}</span><span class="pln">

  addToCart</span><span class="pun">(</span><span class="pln">product</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">items</span><span class="pun">.</span><span class="pln">push</span><span class="pun">(</span><span class="pln">product</span><span class="pun">);</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">

  getItems</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">return</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">items</span><span class="pun">;</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">

  clearCart</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">items </span><span class="pun">=</span><span class="pln"> </span><span class="pun">[];</span><span class="pln">
    </span><span class="kwd">return</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">items</span><span class="pun">;</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">

  getShippingPrices</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">return</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">http</span><span class="pun">.</span><span class="kwd">get</span><span class="pun">(</span><span class="str">'/assets/shipping.json'</span><span class="pun">);</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example></li></ol><div class="alert is-helpful"><p translation-result="on">要了解关于 Angular <code><a href="api/common/http/HttpClient" class="code-anchor">HttpClient</a></code> 的更多信息，请参阅<a href="guide/http" title="HttpClient 指南">HttpClient 指南</a>。</p><p translation-origin="off">For more information about Angular's <code><a href="api/common/http/HttpClient" class="code-anchor">HttpClient</a></code>, see <a href="guide/http" title="HttpClient guide">HttpClient</a>.</p></div><h2 id="define-the-shipping-page" translation-result="on">定义配送页面<a title="Link to this heading" class="header-link" aria-hidden="true" href="start/data#define-the-shipping-page"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="define-the-shipping-page">Define the shipping page<a title="Link to this heading" class="header-link" aria-hidden="true" href="start/data#define-the-shipping-page"><i class="material-icons">link</i></a></h2><p translation-result="on">现在你的应用已经可以检索配送数据了，你还要创建一个配送组件和相关的模板。</p><p translation-origin="off">Now that your app can retrieve shipping data, create a shipping component and template.</p><ol><li><p translation-result="on">生成一个名为 <code>shipping</code> 的新组件。</p><p translation-origin="off">Generate a new component named <code>shipping</code>.</p><p translation-result="on">提示：在文件列表框中，右键单击 <code>app</code> 文件夹，选择 <code>Angular Generator</code> 和 <code><a href="api/core/Component" class="code-anchor">Component</a></code>。</p><p translation-origin="off">Reminder: In the file list, right-click the <code>app</code> folder, choose <code>Angular Generator</code> and <code><a href="api/core/Component" class="code-anchor">Component</a></code>.</p><code-example header="src/app/shipping/shipping.component.ts" path="getting-started/src/app/shipping/shipping.component.1.ts" ng-version="9.0.0-rc.11"><div style="display:none">import { <a href="api/core/Component" class="code-anchor">Component</a>, <a href="api/core/OnInit" class="code-anchor">OnInit</a> } from '@angular/core'; @<a href="api/core/Component" class="code-anchor">Component</a>({ selector: 'app-shipping', <a href="api/core/Component#templateUrl" class="code-anchor">templateUrl</a>: './shipping.component.html', <a href="api/core/Component#styleUrls" class="code-anchor">styleUrls</a>: ['./shipping.component.css'] }) export class ShippingComponent implements <a href="api/core/OnInit" class="code-anchor">OnInit</a> { constructor() { } ngOnInit() { } }</div><header class="ng-star-inserted">src/app/shipping/shipping.component.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/shipping/shipping.component.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/core/Component" class="code-anchor"><span class="typ">Component</span></a><span class="pun">,</span><span class="pln"> </span><a href="api/core/OnInit" class="code-anchor"><span class="typ">OnInit</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/core'</span><span class="pun">;</span><span class="pln">

</span><span class="lit">@</span><a href="api/core/Component" class="code-anchor"><span class="lit">Component</span></a><span class="pun">({</span><span class="pln">
  selector</span><span class="pun">:</span><span class="pln"> </span><span class="str">'app-shipping'</span><span class="pun">,</span><span class="pln">
  </span><a href="api/core/Component#templateUrl" class="code-anchor"><span class="pln">templateUrl</span></a><span class="pun">:</span><span class="pln"> </span><span class="str">'./shipping.component.html'</span><span class="pun">,</span><span class="pln">
  </span><a href="api/core/Component#styleUrls" class="code-anchor"><span class="pln">styleUrls</span></a><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="str">'./shipping.component.css'</span><span class="pun">]</span><span class="pln">
</span><span class="pun">})</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">ShippingComponent</span><span class="pln"> </span><span class="kwd">implements</span><span class="pln"> </span><a href="api/core/OnInit" class="code-anchor"><span class="typ">OnInit</span></a><span class="pln"> </span><span class="pun">{</span><span class="pln">

  </span><span class="kwd">constructor</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="pun">}</span><span class="pln">

  ngOnInit</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">

</span><span class="pun">}</span></code>
    </pre></aio-code></code-example></li><li><p translation-result="on">在 <code>app.module.ts</code> 中，添加一个配送路由。其 <code>path</code> 为 <code>shipping</code>，其 component 为 <code>ShippingComponent</code>。</p><p translation-origin="off">In <code>app.module.ts</code>, add a route for shipping. Specify a <code>path</code> of <code>shipping</code> and a component of <code>ShippingComponent</code>.</p><code-example header="src/app/app.module.ts" path="getting-started/src/app/app.module.ts" region="shipping-route" ng-version="9.0.0-rc.11"><div style="display:none">@<a href="api/core/NgModule" class="code-anchor">NgModule</a>({ imports: [ <a href="api/platform-browser/BrowserModule" class="code-anchor">BrowserModule</a>, <a href="api/common/http/HttpClientModule" class="code-anchor">HttpClientModule</a>, <a href="api/forms/ReactiveFormsModule" class="code-anchor">ReactiveFormsModule</a>, RouterModule.forRoot([ { path: '', component: ProductListComponent }, { path: 'products/:productId', component: ProductDetailsComponent }, { path: 'cart', component: CartComponent }, { path: 'shipping', component: ShippingComponent }, ]) ], declarations: [ AppComponent, TopBarComponent, ProductListComponent, ProductAlertsComponent, ProductDetailsComponent, CartComponent, ShippingComponent ], bootstrap: [ AppComponent ] }) export class AppModule { }</div><header class="ng-star-inserted">src/app/app.module.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/app.module.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="lit">@</span><a href="api/core/NgModule" class="code-anchor"><span class="lit">NgModule</span></a><span class="pun">({</span><span class="pln">
  imports</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
    </span><a href="api/platform-browser/BrowserModule" class="code-anchor"><span class="typ">BrowserModule</span></a><span class="pun">,</span><span class="pln">
    </span><a href="api/common/http/HttpClientModule" class="code-anchor"><span class="typ">HttpClientModule</span></a><span class="pun">,</span><span class="pln">
    </span><a href="api/forms/ReactiveFormsModule" class="code-anchor"><span class="typ">ReactiveFormsModule</span></a><span class="pun">,</span><span class="pln">
    </span><span class="typ">RouterModule</span><span class="pun">.</span><span class="pln">forRoot</span><span class="pun">([</span><span class="pln">
      </span><span class="pun">{</span><span class="pln"> path</span><span class="pun">:</span><span class="pln"> </span><span class="str">''</span><span class="pun">,</span><span class="pln"> component</span><span class="pun">:</span><span class="pln"> </span><span class="typ">ProductListComponent</span><span class="pln"> </span><span class="pun">},</span><span class="pln">
      </span><span class="pun">{</span><span class="pln"> path</span><span class="pun">:</span><span class="pln"> </span><span class="str">'products/:productId'</span><span class="pun">,</span><span class="pln"> component</span><span class="pun">:</span><span class="pln"> </span><span class="typ">ProductDetailsComponent</span><span class="pln"> </span><span class="pun">},</span><span class="pln">
      </span><span class="pun">{</span><span class="pln"> path</span><span class="pun">:</span><span class="pln"> </span><span class="str">'cart'</span><span class="pun">,</span><span class="pln"> component</span><span class="pun">:</span><span class="pln"> </span><span class="typ">CartComponent</span><span class="pln"> </span><span class="pun">},</span><span class="pln">
      </span><span class="pun">{</span><span class="pln"> path</span><span class="pun">:</span><span class="pln"> </span><span class="str">'shipping'</span><span class="pun">,</span><span class="pln"> component</span><span class="pun">:</span><span class="pln"> </span><span class="typ">ShippingComponent</span><span class="pln"> </span><span class="pun">},</span><span class="pln">
    </span><span class="pun">])</span><span class="pln">
  </span><span class="pun">],</span><span class="pln">
  declarations</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
    </span><span class="typ">AppComponent</span><span class="pun">,</span><span class="pln">
    </span><span class="typ">TopBarComponent</span><span class="pun">,</span><span class="pln">
    </span><span class="typ">ProductListComponent</span><span class="pun">,</span><span class="pln">
    </span><span class="typ">ProductAlertsComponent</span><span class="pun">,</span><span class="pln">
    </span><span class="typ">ProductDetailsComponent</span><span class="pun">,</span><span class="pln">
    </span><span class="typ">CartComponent</span><span class="pun">,</span><span class="pln">
    </span><span class="typ">ShippingComponent</span><span class="pln">
  </span><span class="pun">],</span><span class="pln">
  bootstrap</span><span class="pun">:</span><span class="pln"> </span><span class="pun">[</span><span class="pln">
    </span><span class="typ">AppComponent</span><span class="pln">
  </span><span class="pun">]</span><span class="pln">
</span><span class="pun">})</span><span class="pln">
</span><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">AppModule</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="pun">}</span></code>
    </pre></aio-code></code-example><p translation-result="on">新的配送组件尚未链接到任何其它组件，但你可以通过输入其路由指定的 URL 在预览窗格中看到它的模板。该 URL 具有以下模式：<code>https://getting-started.stackblitz.io/shipping</code>，其中的 gets-started.stackblitz.io 部分可能与你的 StackBlitz 项目不同。</p><p translation-origin="off">There's no link to the new shipping component yet, but you can see its template in the preview pane by entering the URL its route specifies. The URL has the pattern: <code>https://getting-started.stackblitz.io/shipping</code> where the <code>getting-started.stackblitz.io</code> part may be different for your StackBlitz project.</p></li><li><p translation-result="on">修改配送组件，让它利用购物车服务从 <code>shipping.json</code> 文件中通过 HTTP 检索配送数据。</p><p translation-origin="off">Modify the shipping component so it uses the cart service to retrieve shipping data via HTTP from the <code>shipping.json</code> file.</p><ol><li><p translation-result="on">导入购物车服务。</p><p translation-origin="off">Import the cart service.</p><code-example header="src/app/shipping/shipping.component.ts" path="getting-started/src/app/shipping/shipping.component.ts" region="imports" ng-version="9.0.0-rc.11"><div style="display:none">import { <a href="api/core/Component" class="code-anchor">Component</a>, <a href="api/core/OnInit" class="code-anchor">OnInit</a> } from '@angular/core'; import { CartService } from '../cart.service';</div><header class="ng-star-inserted">src/app/shipping/shipping.component.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/shipping/shipping.component.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><a href="api/core/Component" class="code-anchor"><span class="typ">Component</span></a><span class="pun">,</span><span class="pln"> </span><a href="api/core/OnInit" class="code-anchor"><span class="typ">OnInit</span></a><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'@angular/core'</span><span class="pun">;</span><span class="pln">

</span><span class="kwd">import</span><span class="pln"> </span><span class="pun">{</span><span class="pln"> </span><span class="typ">CartService</span><span class="pln"> </span><span class="pun">}</span><span class="pln"> </span><span class="kwd">from</span><span class="pln"> </span><span class="str">'../cart.service'</span><span class="pun">;</span></code>
    </pre></aio-code></code-example></li><li><p translation-result="on">定义 <code>shippingCosts</code> 属性。</p><p translation-origin="off">Define a <code>shippingCosts</code> property.</p><code-example path="getting-started/src/app/shipping/shipping.component.ts" header="src/app/shipping/shipping.component.ts" region="props" ng-version="9.0.0-rc.11"><div style="display:none">export class ShippingComponent implements <a href="api/core/OnInit" class="code-anchor">OnInit</a> { shippingCosts; }</div><header class="ng-star-inserted">src/app/shipping/shipping.component.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/shipping/shipping.component.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">ShippingComponent</span><span class="pln"> </span><span class="kwd">implements</span><span class="pln"> </span><a href="api/core/OnInit" class="code-anchor"><span class="typ">OnInit</span></a><span class="pln"> </span><span class="pun">{</span><span class="pln">
  shippingCosts</span><span class="pun">;</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example></li><li><p translation-result="on">把购物车服务注入到 <code>ShippingComponent</code> 的构造函数中：</p><p translation-origin="off">Inject the cart service in the <code>ShippingComponent</code> constructor:</p><code-example path="getting-started/src/app/shipping/shipping.component.ts" header="src/app/shipping/shipping.component.ts" region="inject-cart-service" ng-version="9.0.0-rc.11"><div style="display:none">constructor( private cartService: CartService ) { }</div><header class="ng-star-inserted">src/app/shipping/shipping.component.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/shipping/shipping.component.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">constructor</span><span class="pun">(</span><span class="pln">
  </span><span class="kwd">private</span><span class="pln"> cartService</span><span class="pun">:</span><span class="pln"> </span><span class="typ">CartService</span><span class="pln">
</span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
</span><span class="pun">}</span></code>
    </pre></aio-code></code-example></li><li><p translation-result="on">利用购物车服务的 <code>getShippingPrices()</code> 方法设置 <code>shippingCosts</code> 属性。</p><p translation-origin="off">Set the <code>shippingCosts</code> property using the <code>getShippingPrices()</code> method from the cart service.</p><code-example path="getting-started/src/app/shipping/shipping.component.ts" header="src/app/shipping/shipping.component.ts" region="ctor" ng-version="9.0.0-rc.11"><div style="display:none">export class ShippingComponent implements <a href="api/core/OnInit" class="code-anchor">OnInit</a> { shippingCosts; constructor( private cartService: CartService ) { } ngOnInit() { this.shippingCosts = this.cartService.getShippingPrices(); } }</div><header class="ng-star-inserted">src/app/shipping/shipping.component.ts</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/shipping/shipping.component.ts">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="kwd">export</span><span class="pln"> </span><span class="kwd">class</span><span class="pln"> </span><span class="typ">ShippingComponent</span><span class="pln"> </span><span class="kwd">implements</span><span class="pln"> </span><a href="api/core/OnInit" class="code-anchor"><span class="typ">OnInit</span></a><span class="pln"> </span><span class="pun">{</span><span class="pln">
  shippingCosts</span><span class="pun">;</span><span class="pln">

  </span><span class="kwd">constructor</span><span class="pun">(</span><span class="pln">
    </span><span class="kwd">private</span><span class="pln"> cartService</span><span class="pun">:</span><span class="pln"> </span><span class="typ">CartService</span><span class="pln">
  </span><span class="pun">)</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">

  ngOnInit</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><span class="pln">
    </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">shippingCosts </span><span class="pun">=</span><span class="pln"> </span><span class="kwd">this</span><span class="pun">.</span><span class="pln">cartService</span><span class="pun">.</span><span class="pln">getShippingPrices</span><span class="pun">();</span><span class="pln">
  </span><span class="pun">}</span><span class="pln">

</span><span class="pun">}</span></code>
    </pre></aio-code></code-example></li></ol></li><li><p translation-result="on">利用 <code><a href="api/core/testing/async" class="code-anchor">async</a></code> 管道修改配送组件的模板，以显示配送类型和价格：</p><p translation-origin="off">Update the shipping component's template to display the shipping types and prices using the <code><a href="api/core/testing/async" class="code-anchor">async</a></code> pipe:</p><code-example header="src/app/shipping/shipping.component.html" path="getting-started/src/app/shipping/shipping.component.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;h3&gt;Shipping Prices&lt;/h3&gt; &lt;div class="shipping-item" *<a href="api/common/NgForOf" class="code-anchor">ngFor</a>="let shipping of shippingCosts | async"&gt; &lt;span&gt;{{ shipping.type }}&lt;/span&gt; &lt;span&gt;{{ shipping.price | <a href="api/common/CurrencyPipe" class="code-anchor">currency</a> }}&lt;/span&gt; &lt;/div&gt;</div><header class="ng-star-inserted">src/app/shipping/shipping.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/shipping/shipping.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;h3&gt;</span><span class="pln">Shipping Prices</span><span class="tag">&lt;/h3&gt;</span><span class="pln">

</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"shipping-item"</span><span class="pln"> *</span><a href="api/common/NgForOf" class="code-anchor"><span class="atn">ngFor</span></a><span class="pun">=</span><span class="atv">"let shipping of shippingCosts | async"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;span&gt;</span><span class="pln">{{ shipping.type }}</span><span class="tag">&lt;/span&gt;</span><span class="pln">
  </span><span class="tag">&lt;span&gt;</span><span class="pln">{{ shipping.price | </span><a href="api/common/CurrencyPipe" class="code-anchor"><span class="pln">currency</span></a><span class="pln"> }}</span><span class="tag">&lt;/span&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code>
    </pre></aio-code></code-example><p translation-result="on"><code><a href="api/core/testing/async" class="code-anchor">async</a></code> 管道从数据流中返回最新值，并在所属组件的生命期内持续返回。当 Angular 销毁该组件时，<code><a href="api/core/testing/async" class="code-anchor">async</a></code> 管道会自动停止。有关 <code><a href="api/core/testing/async" class="code-anchor">async</a></code> 管道的详细信息，请参见 <a href="/api/common/AsyncPipe">AsyncPipe API 文档</a>。</p><p translation-origin="off">The <code><a href="api/core/testing/async" class="code-anchor">async</a></code> pipe returns the latest value from a stream of data and continues to do so for the life of a given component. When Angular destroys that component, the <code><a href="api/core/testing/async" class="code-anchor">async</a></code> pipe automatically stops. For detailed information about the <code><a href="api/core/testing/async" class="code-anchor">async</a></code> pipe , see the <a href="/api/common/AsyncPipe">AsyncPipe API documentation</a>.</p></li><li><p translation-result="on">在购物车页面中添加一个到配送页面的链接：</p><p translation-origin="off">Add a link from the cart page to the shipping page:</p><code-example header="src/app/cart/cart.component.html" path="getting-started/src/app/cart/cart.component.2.html" ng-version="9.0.0-rc.11"><div style="display:none">&lt;h3&gt;Cart&lt;/h3&gt; &lt;p&gt; &lt;a <a href="api/router/RouterLink" class="code-anchor">routerLink</a>="/shipping"&gt;Shipping Prices&lt;/a&gt; &lt;/p&gt; &lt;div class="cart-item" *<a href="api/common/NgForOf" class="code-anchor">ngFor</a>="let <a href="api/core/IterableChangeRecord#item" class="code-anchor">item</a> of items"&gt; &lt;span&gt;{{ item.name }}&lt;/span&gt; &lt;span&gt;{{ item.price | <a href="api/common/CurrencyPipe" class="code-anchor">currency</a> }}&lt;/span&gt; &lt;/div&gt;</div><header class="ng-star-inserted">src/app/cart/cart.component.html</header><aio-code class="headed-code"><pre class="lang- prettyprint">      <button title="Copy code snippet" class="material-icons copy-button no-print ng-star-inserted" aria-label="Copy code snippet from src/app/cart/cart.component.html">
        <span aria-hidden="true">content_copy</span>
      </button>
      <code class="animated fadeIn"><span class="tag">&lt;h3&gt;</span><span class="pln">Cart</span><span class="tag">&lt;/h3&gt;</span><span class="pln">

</span><span class="tag">&lt;p&gt;</span><span class="pln">
  </span><span class="tag">&lt;a</span><span class="pln"> </span><a href="api/router/RouterLink" class="code-anchor"><span class="atn">routerLink</span></a><span class="pun">=</span><span class="atv">"/shipping"</span><span class="tag">&gt;</span><span class="pln">Shipping Prices</span><span class="tag">&lt;/a&gt;</span><span class="pln">
</span><span class="tag">&lt;/p&gt;</span><span class="pln">

</span><span class="tag">&lt;div</span><span class="pln"> </span><span class="atn">class</span><span class="pun">=</span><span class="atv">"cart-item"</span><span class="pln"> *</span><a href="api/common/NgForOf" class="code-anchor"><span class="atn">ngFor</span></a><span class="pun">=</span><span class="atv">"let </span><a href="api/core/IterableChangeRecord#item" class="code-anchor"><span class="atv">item</span></a><span class="atv"> of items"</span><span class="tag">&gt;</span><span class="pln">
  </span><span class="tag">&lt;span&gt;</span><span class="pln">{{ item.name }}</span><span class="tag">&lt;/span&gt;</span><span class="pln">
  </span><span class="tag">&lt;span&gt;</span><span class="pln">{{ item.price | </span><a href="api/common/CurrencyPipe" class="code-anchor"><span class="pln">currency</span></a><span class="pln"> }}</span><span class="tag">&lt;/span&gt;</span><span class="pln">
</span><span class="tag">&lt;/div&gt;</span></code>
    </pre></aio-code></code-example></li><li><p translation-result="on">测试这个运费价格功能：</p><p translation-origin="off">Test your shipping prices feature:</p><p translation-result="on">点击“Checkout”按钮，查看更新后的购物车。（注意，修改应用会导致预览窗格刷新，这会清空购物车。）</p><p translation-origin="off">Click the "Checkout" button to see the updated cart. Remember that changing the app causes the preview to refresh, which empties the cart.</p><div class="lightbox"><img src="generated/images/guide/start/cart-empty-with-shipping-prices.png" alt="Cart with link to shipping prices" width="301" height="208"></div><p translation-result="on">点击此链接可以导航到运费页。</p><p translation-origin="off">Click on the link to navigate to the shipping prices.</p><div class="lightbox"><img src="generated/images/guide/start/shipping-prices.png" alt="Display shipping prices" width="301" height="238"></div></li></ol><h2 id="next-steps" translation-result="on">下一步<a title="Link to this heading" class="header-link" aria-hidden="true" href="start/data#next-steps"><i class="material-icons">link</i></a></h2><h2 translation-origin="off" id="next-steps">Next steps<a title="Link to this heading" class="header-link" aria-hidden="true" href="start/data#next-steps"><i class="material-icons">link</i></a></h2><p translation-result="on">恭喜！你有一个带有商品名录和购物车的在线商店应用了，而且你还可以查询并显示运费。</p><p translation-origin="off">Congratulations! You have an online store application with a product catalog and shopping cart. You can also look up and display shipping prices.</p><p translation-result="on">要继续探索 Angular，请选择下列选项之一：</p><p translation-origin="off">To continue exploring Angular, choose either of the following options:</p><ul><li><p translation-result="on"><a href="start/forms" title="入门：表单">继续浏览“表单”部分</a>，通过添加购物车页面和一个结账表单来完成该应用。</p><p translation-origin="off"><a href="start/forms" title="Getting Started: Forms">Continue to the "Forms" section</a> to finish the app by adding the shopping cart page and a checkout form.</p></li><li><p translation-result="on"><a href="start/deployment" title="入门：部署">跳到“部署”部分，</a>把你的应用部署到 Firebase 或转成本地开发。</p><p translation-origin="off"><a href="start/deployment" title="Getting Started: Deployment">Skip ahead to the "Deployment" section</a> to move to local development, or deploy your app to Firebase or your own server.</p></li></ul></div></div></aio-doc-viewer></main></mat-sidenav-content></mat-sidenav-container><div class="toc-container no-print ng-star-inserted"><aio-lazy-ce selector="aio-toc"><aio-toc ng-version="9.0.0-rc.11"><div class="toc-inner no-print collapsed ng-star-inserted"><ul class="toc-list"><li class="h1 ng-star-inserted active" title="管理数据"><a href="start/data#managing-data">管理数据</a></li><li class="h2 ng-star-inserted" title="服务"><a href="start/data#services">服务</a></li><li class="h2 ng-star-inserted" title="创建购物车服务"><a href="start/data#create-the-shopping-cart-service">创建购物车服务</a></li><li class="h3 ng-star-inserted" title="定义购物车服务"><a href="start/data#define-a-cart-service">定义购物车服务</a></li><li class="h3 ng-star-inserted" title="使用购物车服务"><a href="start/data#use-the-cart-service">使用购物车服务</a></li><li class="h2 ng-star-inserted" title="创建购物车页面"><a href="start/data#create-the-cart-page">创建购物车页面</a></li><li class="h3 ng-star-inserted" title="设置该组件"><a href="start/data#set-up-the-component">设置该组件</a></li><li class="h3 ng-star-inserted" title="显示购物车商品"><a href="start/data#display-the-cart-items">显示购物车商品</a></li><li class="h2 ng-star-inserted" title="检索运费价格"><a href="start/data#retrieve-shipping-prices">检索运费价格</a></li><li class="h3 ng-star-inserted" title="预定义的配送数据"><a href="start/data#predefined-shipping-data">预定义的配送数据</a></li><li class="h3 ng-star-inserted" title="在 AppModule 中为应用启用 HttpClient"><a href="start/data#use-httpclient-in-the-appmodule">在 <code>AppModule</code> 中为应用启用 <code>HttpClient</code></a></li><li class="h3 ng-star-inserted" title="在购物车服务中使用 HttpClient"><a href="start/data#use-httpclient-in-the-cart-service">在购物车服务中使用 <code>HttpClient</code></a></li><li class="h3 ng-star-inserted" title="定义 get() 方法"><a href="start/data#define-the-get-method">定义 <code>get()</code> 方法</a></li><li class="h2 ng-star-inserted" title="定义配送页面"><a href="start/data#define-the-shipping-page">定义配送页面</a></li><li class="h2 ng-star-inserted" title="下一步"><a href="start/data#next-steps">下一步</a></li></ul></div></aio-toc></aio-lazy-ce></div><footer class="no-print"><aio-footer><div class="grid-fluid"><div class="footer-block ng-star-inserted"><h3>资源</h3><ul><li class="ng-star-inserted"><a class="link" href="about" title="Angular 贡献者。">关于</a></li><li class="ng-star-inserted"><a class="link" href="resources" title="网络上的 Angular 工具、培训、博客等">资源列表</a></li><li class="ng-star-inserted"><a class="link" href="presskit" title="我们的联系方式、LOGO 和品牌">宣传资料</a></li><li class="ng-star-inserted"><a class="link" href="https://blog.angular.io/" title="Angular 官方博客">博客</a></li><li class="ng-star-inserted"><a class="link" href="analytics" title="Angular 使用情况分析">使用情况分析</a></li></ul></div><div class="footer-block ng-star-inserted"><h3>帮助</h3><ul><li class="ng-star-inserted"><a class="link" href="https://stackoverflow.com/questions/tagged/angular" title="Stack Overflow: 这里的社区会回答你关于 Angular 的技术问题">Stack Overflow</a></li><li class="ng-star-inserted"><a class="link" href="https://gitter.im/angular/angular" title="和老鸟聊 Angular">Gitter</a></li><li class="ng-star-inserted"><a class="link" href="https://github.com/angular/angular/issues" title="在 github 上报告问题和建议。">报告问题</a></li><li class="ng-star-inserted"><a class="link" href="https://github.com/angular/code-of-conduct/blob/master/CODE_OF_CONDUCT.md" title="让我们彼此尊重">行为规范</a></li></ul></div><div class="footer-block ng-star-inserted"><h3>社区</h3><ul><li class="ng-star-inserted"><a class="link" href="events" title="Angular events around the world.">活动</a></li><li class="ng-star-inserted"><a class="link" href="http://www.meetup.com/topics/angularjs/" title="参加聚会，向别的开发人员学习">聚会</a></li><li class="ng-star-inserted"><a class="link" href="https://twitter.com/angular" title="Twitter">Twitter</a></li><li class="ng-star-inserted"><a class="link" href="https://github.com/angular/angular" title="GitHub">GitHub</a></li><li class="ng-star-inserted"><a class="link" href="contribute" title="向 Angular 做贡献">做贡献</a></li></ul></div><div class="footer-block ng-star-inserted"><h3>多语言</h3><ul><li class="ng-star-inserted"><a class="link" href="https://angular.io/" title="English Version.">English Version</a></li><li class="ng-star-inserted"><a class="link" href="https://angular.tw/" title="正體中文版">正體中文版</a></li><li class="ng-star-inserted"><a class="link" href="https://angular.jp/" title="日本語版">日本語版</a></li><li class="ng-star-inserted"><a class="link" href="https://angular.kr/" title="한국어">한국어</a></li></ul></div></div><p>Super-powered by Google ©2010-2020. 代码授权方式：<a href="license" title="License text">MIT-style License</a>. 文档授权方式：<a href="http://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.</p><p>当前版本：9.0.1-build.79+sha.55f1ef01.</p></aio-footer></footer><div class="cdk-visually-hidden ng-star-inserted"><mat-icon role="img" class="mat-icon notranslate material-icons mat-icon-no-color" aria-hidden="true">&nbsp;</mat-icon></div></aio-shell><noscript><div class="background-sky hero"></div><section id="intro" style="text-shadow:1px 1px #1976d2"><div class="hero-logo"><img src="assets/images/logos/angular/angular.svg" width="250" height="250" alt="Angular"></div><div class="homepage-container"><div class="hero-headline">一套框架，多种平台<br>移动 &amp; 桌面</div></div></section><h2 style="color:red;margin-top:40px;position:relative;text-align:center;text-shadow:1px 1px #fafafa"><b><i>该网站需要浏览器支持 JavaScript</i></b></h2></noscript><script src="runtime-es2015.ee607cf78010348c8334.js" type="module"></script><script src="runtime-es5.ee607cf78010348c8334.js" nomodule="" defer=""></script><script src="polyfills-es5.1494ca908613f3429457.js" nomodule="" defer=""></script><script src="polyfills-es2015.9057a05c650bf60ecbf4.js" type="module"></script><script src="main-es2015.9cd62e243bd182514a19.js" type="module"></script><script src="main-es5.9cd62e243bd182514a19.js" nomodule="" defer=""></script><div class="cdk-live-announcer-element cdk-visually-hidden" aria-atomic="true" aria-live="polite"></div></body></html>